CODEWITHSUNDEEP
angulartypescript
user2828442
user2828442

Reputation: 2515

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

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:

enter image description here

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

Upvotes: 10

Views: 12928

Answers (4)

Hamed Baatour
Hamed Baatour

Reputation: 6932

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.

Upvotes: 4

Diego Ven&#226;ncio
Diego Ven&#226;ncio

Reputation: 6007

A little example that I use. Variable 'title' receive the component location/path. Then in component I check:

In app.component.ts

isMaps(path) {
    var title = this.location.prepareExternalUrl(this.location.path());
    title = title.slice(1);
    if (path == title) {
        return false;
    }
    else {
        return true;
    }
}

in app.component.html

   <router-outlet></router-outlet>
    <div *ngIf="isMaps('maps')">
        <app-footer></app-footer>
    </div>

If compenent name/path is maps, method will return 'false' then not show foot in map.component.ts

Upvotes: 0

Spitzbueb
Spitzbueb

Reputation: 5891

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.

Upvotes: 11

Dhyey
Dhyey

Reputation: 4335

If you want to show menu only in few components then make a new component for menu, remove the html for menu from app.component.html and include the newly built menu component in the files that you want like below:

<div id="some-other-component">
    <menu-comp></menu-comp>
    // other html below
</div>

Upvotes: 1

Related Questions