How to display a component in Angular 9 with Example

How to display a component in Angular 9 with Example

In this tutorial, 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 apps.

Creating a Component with Angular CLI

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's 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

Thanks for reading !

Originally published by Ahmed Bouchefra at techiediaries

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica