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!!