How to exclude app component data in other components in Angular6

As we know that app component which is global component which display in all components. But some cases their may be requirement that app component should hide in other components. To achieve this i have solution .

Let’s create a very simple Angular application which have routes.

Getting Started:

First we’ll need Node & NPM installed.

To check if you have node installed run this command in your terminal:

node -v

To confirm that you have npm installed you can run this command:

npm -v

If not, you can download & install NodeJS & NPM from https://nodejs.org/en/

Install the Angular CLI:

npm install -g @angular/cli

Generate a new Angular project:

ng new Examplesampleapp

Navigate to http://localhost:4200/. At this point the application will automatically reload if you change any of the source files. The initial page should be the default Angular 6 page:

Add Some Additional Components in App Folder

ng g c home

The CLI will create all the appropriate files and place them into the app folder

Add the AppRoutingModule:

Use the CLI to generate it.

ng generate module app-routing --flat --module=appHow 

It should also add declarations into the app.module.ts

Next, we’ll add bootstrap 3 CSS library into the project to add styling.

npm install --save bootstrap@3

Afterwards add a path to “styles” array in the angular.json

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ]

Next Add the Router Module

A new file needs to be created in app folder to implement the router module: app.routing.ts. Insert the following code:

now generate app-routing with below command.

Import AppRoutingModule in AppModule

The implementation of AppModule, the main application module, looks like the following:

Implement Template of NavComponent and add selector: ‘app-nav’ to App Component.

In nav.component.html insert below code :

In App component just insert below code:

6) Start Application

We’re ready to go now. Switch to the command line, change to the project directory and execute the following command to start up the project:

$ npm start

The browser is started automatically and the application is displayed. The user interface should look like the following :

As above GIF image clearly showing that app component data include in all components

To exclude app component in some components we need to add below code :

For Example : I want to hide app component in about component and contact component . To achieve this, in angular we have concept of router events.

Just include below code in app.component.ts:

We need import router and navigation start , by setting boolean value with false and assigning boolean value to urls where we want to hide app data .

Just include below code in app.component.html:

Using *ngif directive by passing boolean value in html

Start Application

We’re ready to go now. Switch to the command line, change to the project directory and execute the following command to start up the project:

$ npm start

The browser is started automatically and the application is displayed. The user interface should look like the following :

As we observed that app data is showing in home component and app data is excluded in about and contact component.

I hope this blog useful for you.

Thank you Guys.