Use Angular Component as Element, Attribute, and Class

Components are building blocks of any Angular application. Most commonly Angular components exist as custom markup elements in the template. However, that's not the only way to use components. You can also use them as if they are an attribute of an HTML element. Or you can also use them as the value of class attribute on HTML elements. Using Angular selectors you can decide how a component will be used in the template markup. To that end this article illustrates each type of usage with a simple example.

Let's get going.

First of all, create a new Angular application using Angular CLI. To do that open NodeJS command prompt and issue the following command :

> ng new ComponentSelectorDemo

This will create a new Angular application inside the ComponentSelectorDemo folder. Then go inside the ComponentSelectorDemo folder and create three components using Angular CLI commands:

> ng generate component Element
> ng generate component Attribute
> ng generate component Class

These three components represent the three selectors of a component namely element selector, attribute selector, and class selector.

Now let's add some code and markup to these components and see them in action.

Using element selector

Open the Element component TypeScript class in your favorite editor and modify the code as shown below:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.css']
})
export class ElementComponent implements OnInit {

    @Input()
    message: string = "Welcome!";

    constructor() { }

    ngOnInit() {
    }

}

Notice the code marked in bold letters. The @Component decorator specifies the selector to be an element - app-element. This indicates that the Element component will be used as a markup element.

The above code also defines a property binding using @Input() decorator. The message property has a default value - Welcome. If you don't set any value for the message property while using this component the default value will be used, else whatever value you specified that will be used.

The template of the Element component simply outputs the message property using interpolation.

<h2>{{message}}</h2>

Now, open root component's template - app.component.html - and use the Element component in it as shown below:

<app-element></app-element>

<app-element [message]="Hello World!"></app-element>

The first instance of the Element component doesn't specify any message property whereas the second instance sets the message to - Hello World!

Run the application by issuing the following command:

ng serve --open 

Your output would resemble the following figure:

Using attribute selector

Now open Attribute component's TypeScript class in the editor and modify it as follows:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[app-attribute]',
  templateUrl: './attribute.component.html',
  styleUrls: ['./attribute.component.css']
})
export class AttributeComponent implements OnInit {

    @Input()
    message: string = "Welcome!";

    constructor() { }

    ngOnInit() {
    }
}

Notice the code shown in bold letters. This time we used attribute selector - the component name enclosed in square brackets. The template of Attribute component is same as before and simply outputs message property.

To use this component, open the template of the root component and write the following markup:

<div app-attribute></div>

<div app-attribute [message]="'Hello Galaxy!'"></div>

In this case you didn't use the component as an element. You used it as an attribute on the <div> element. You could have any other element also such as <span> or <p>. Notice how the second instance sets the message property.

The following figure shows a sample run of the application:

Using class selector

Now let's complete the Class component. The Class component is shown below:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '.app-class',
  templateUrl: './class.component.html',
  styleUrls: ['./class.component.css']
})
export class ClassComponent implements OnInit {

    @Input()
    message: string = "Welcome!";

    constructor() { }

    ngOnInit() {
    }
}

In this case we use class selector (notice the dot before app-class). That means our component will be used as a value of css attribute.

Open the root component's template and write the following markup:

<div class="app-class"></div>

<div class=app-class [message]="'Hello Universe!'"></div>

Notice how the first instance specifies the app-class in the class attribute of a <div> element. You could have also used other tags such as <span> and <p>. Also notice how the second instance sets the message property.

The following figure shows a sample run of the application:

That's it for now! Keep coding!!