Mastering ASP.NET Core 2.1 : Instructor-led online course by Bipin Joshi in November 2018. Read more...
Live instructor-led online courses in ASP.NET Core and Design Patterns. Registration is open for November 2018 batch. More details are available here.

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


Bipin Joshi is a software consultant, trainer, author and spiritual yoga mentor having 23+ years of experience in software development. He teaches online training courses in ASP.NET Core, Angular, and Design Patterns to individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 24 September 2018


Tags : ASP.NET ASP.NET Core AngularJS JavaScript Components