Angular Components Decorator | Component Decorator

selector
template
Styles
standalone

Component Decorator or Annotation are written in @Component at the top of export class in app.component.ts. Decorator function or annotation includes selector, templateUrl and styleUrls by default.

Component Decorator use an Object to provide metadata to Angular App. Lets first understand the Structure of Component Decorator.

Annotation Element	Use
selector	The HTMl Markup Tag or element for component
template/ templateUrl	specifies the path of template. It could be the tag for template or relative path of html file for templateUrl.
styles/ styleUrls	specifies the stylesheet of template. It could be the array of inline css for template or relative path of .css file for styleUrls in Array.

Selector

Component Selector property defines the markup tag or element for the current component. The default selector is app-root. app-root is declared in index.html file as <app-root></app-root>.

We can use selector by.

name
attribute
class
id

Default selector (name)

By default angular use app-root element.

        <!-- app.component.ts -->
    
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

        <!-- index.html -->
    
<app-root>{{title}}</app-root>

attribute selector

to use attribute in selector, use attribute name in brackets.

        <!-- app.component.ts -->
    
@Component({
    selector: '[app-root]',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

        <!-- index.html -->
    
<div app-root>{{title}}</div>

class selector

to use class name in selector, use .class-name, for example, if class name is app-root, use .app-root. We can also use descriptive class names, like container.

        <!-- app.component.ts -->
    
@Component({
    selector: '.container',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

        <!-- index.html -->
    
<div class="container">{{title}}</div>

id selector

to use id in selector, use #id-name.

        <!-- app.component.ts -->
    
@Component({
    selector: '#container',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

        <!-- index.html -->
    
<div id="container">{{title}}</div>

Components Templates

The Template contains the html markup to display component

Template markup can be written in same file using template or external .html file path using templateUrl.

template

Template property is used to add inline markup. Do not use <script> tag in template.

      <!--app.component.ts-->

    @Component({
        selector: 'app-root',
        template: `<div class="container">
        {{title}}
        </div>`,
        styleUrls: ['./app.component.css']
    })

templateUrl

templateUrl includes the structure of Angular Application.

      <!--app.component.ts-->

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })

styles

styles or styleUrls is an array of stylesheet available for component. We can specifies component's style in the component or external css file.

Inline CSS

      <!--app.component.ts-->
      
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styles: ['h1{color:"#222; margin:1rem 0;"}']
    });

External CSS

      <!--app.component.ts-->
  
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    });

However for global stylesheets like universal selector, containers, grids, fonts, use style.css in src folder. Its is the global css file for all components.

Standalone

Angular 17 and above use standalone:true feature by defaut. Although they were first introduced in Angular 14. Along with Standalone, there is imports new in decorator.

With standalone:true , NgModule is not required. This will simplified angular code and reduce extra boilerplate code.

      <!--app.component.ts-->

  import { Component } from '@angular/core';
  
    @Component({
      standalone: true,
      imports: [RouterOutlet],
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'ngApp';
    }