Introduction

Angular is an HTML and Typescript-based platform and framework for creating single-page client applications. Typescript is used to write Angular. As a set of Typescript libraries that you load into your apps, it implements core and optional functionality. The architecture of an Angular application is based on a few basic concepts. The Angular framework's fundamental building pieces are Angular components, which are arranged into NgModules. NgModules are functional groupings of linked code; an Angular application is defined by a set of NgModules.

Components are an Angular app's most fundamental UI building block. A tree of Angular components makes up an Angular app. A subset of directives, Angular components are always coupled with a template. Only one component can be instantiated for each element in a template, unlike other directives.

Standard CSS is used to style Angular apps. That means you can directly use your knowledge of CSS stylesheets, selectors, rules, and media queries to Angular applications.

Angular may also package component styles with components, allowing for a more modular design than traditional stylesheets.

The use of component styles

You may define not just an HTML template for each Angular component you create, but also the CSS styles that go with it, including any selectors, rules, and media queries you require

The styles attribute in the component metadata is one approach to accomplish this. An array of strings containing CSS code is passed to the styles property. Normally, you only provide it one string, as in this example:

Page-app.component.ts

@Component({
                  selector: 'app-root',
                  template: `

component style

`, styles: ['h1 { font-weight: normal; }'] }) export class PageAppComponent { /*…………..*/ }

Style scope

The styles supplied in the @Component metadata are only applied to that component's template.

They are not inherited by any nested components in the template, nor are they inherited by any content projected into the component.

This scoping constraint is a feature of the style modularity.

Styles of components are being loaded.

A component can be styled in a variety of ways:

Each of these loading patterns follows the scope rules stated before.

Component metadata styles

The @Component decorator can have a styles array property.

The CSS for this component is defined by each string in the array.

src/app/page-app.component.ts (CSS inline)

@Component({
                    selector: 'app-root',
                    template: `
                      

component style

`, styles: ['h1 { font-weight: normal; }'] }) export class PageAppComponent { /*…………..*/ }

Remember that these styles are specific to this component. They are not inherited by any nested components in the template, nor are they inherited by any content projected into the component.

When you use the —inline-style flag with the Angular CLI command ng produce component, an empty styles array is defined.

ng generate component page-app --inline-style

In the component metadata, there are style files

By adding the styleUrls attribute to a component's @Component decorator, you can load styles from external CSS files:

@Component({
                selector: 'app-root',
                template: `

component style

`, styleUrls: ['./page-app.component.css'] }) export class PageAppComponent { /* . . . */ }

It's worth noting that the styles in the style file only apply to this component.

You can use a combination of styles and styleUrls or provide several styles files.

When you execute the Angular CLI command ng produce component without the —inline-style argument, it generates an

ng generate component page-app

Using the style tag, create an inline style template

The style and link tags can be be used to specify style within the component template file, as seen below.

@Component({
                    selector: 'app-page-controls',
                    template: `
                                    

Controls

Using the link tag, create an inline style template

The external style sheets can be added using the link tag, as illustrated below. The path must start with index.html and end with index.html.