Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
In this quick example, we'll see two ways of displaying a component in Angular 9 - using selectors or the router.
After creating a component in Angular using Angular CLI, it will be added to the NgModule.declarations
array of the module where it's used. By default it's the app
module.
Let's see the two ways of displaying a component in your Angular 9 apps.
Creating a Component with Angular CLI 9
Open your terminal and run the following command to create a component:
$ ng generate component dash
Displaying the Component
Now that our component is created, we'll need to display it in our app. There are 2 ways to display a component in Angular:
- Using the component's selector,
- Using the router.
Using the component Selector
You can display a component inside an HTML template using its selector:
import { Component } from '@angular/core';
@Component({
selector: 'app-dash',
templateUrl: './dash.component.html',
styleUrls: ['./dash.component.css']
})
export class DashComponent {
}
We can use the app-dash
selector to display the component as follows:
<app-dash></app-dash>
This is like using regular HTML tags. Angular allows you to extend HTML!.
The app-dash
tag will not be recognized in your app except if you declare the component i.e add the component class to the declarations
array of the module where it should belong.
When you generate the component with Angular CLI, this is automatically done:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashComponent } from './dash/dash.component';
@NgModule({
declarations: [
AppComponent,
DashComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Using the router
You can also use the Angular router to display the component. This allows you to create multiple-views UIs.
The router allows you to map a part of the URL to a specific component which will be rendered when the path is visited via the browser's address bar or when a navigation link, that points to the component's path, is clicked.
Dynamically Displaying a Component
We can display or render a component dynamically by using directives such as *ngIf
or *ngFor
. For example :
<app-dash *ngIf="displayDashboard === true"></app-dash>
The DashComponent
will be only displayed if a displayDashboard
variable that exists on the component's class has a value of true
Most Popular Posts
Anguar 12 New Features 10+ Best Anguar 9/10 Templates for Developers 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial Angular 11 CRUD REST API Angular 11 Tutorial with HttpClient Routing and Navigation with Angular 11 Router Full Vue 3 Tutorial by Example CSS Centering CSS Grid Layout Tutorial Adding Comments to JSON How to Delete Local/Remote Git Branches Webpack Tutorial for Angular Developers GraphQL Tutorial for Angular Developers Git and GitHub for Angular Developers Bootstrap 5 with Sass and Gulp 4 Tutorial by ExampleAngular Newsletter
Get our Angular book for free!