How to exclude code of app.component.html in my other components

Question

app.component.html which is our default component has a menu added in it, but I don't wish to include it on my other component.

How can I do it?

The problem is when I am loading newsection.component.html, it is showing the app.component.html on top as shown below:

How can I restrict it so that it doesn't load above editsection.component.html?

Answer 1

You can do a combination of Dhyey and Hamed Baatour's answer.

First of all, create a separate component for your menu (e.g. menu.component.ts) and place all of your code in there.

Then modify your app.component.ts so that it looks like this:

<menu-component *ngIf="showMenu"></menu-component>
<router-outlet></router-outlet>

Important: Now you have to set showMenu in your app.component.ts and not in your newsection.component.ts.

You can do this by checking the requested URL. Just inject the router in your app.component.ts like this:

constructor(router:Router) {
router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
        this.showMenu = event.url !== "/newsection";
    }
  });
}

This shouldn't show the menu if the route with /newsection is requested.

Answer 2

First things first, you should understand the nature of Angular as it is a single page application which means a single HTML page is loaded and you can inject other code to it by using the router. But, as a workaround, you can use an *ngIf directive to show and hide your app component depending on where the user navigated in the app just like this:

if (this.router.url === '/login') {
this.showComponent = false
}

and in your template you do the following:

<app-root *ngIf="showComponent" ><app-root>
<router-outlet></router-outlet>

Edit

app-root is the selector of a new component that you create to move your app component HTML and logic into it. In your app.component.html template just include the HTML I provided in your app.component.ts inject the router and create the variable called showComponent and then in your ngOnInit or in your constructor add the if statement above to show or hide the app-root component depending on the router condition provided.