What is a best way to have nested project in Angular

Question

What will be the best approach to split my website two separate ways without needing to generate two different angular project?.

Website Application
Admin Area/CMS page

For example www.mywebsiteurl.com is official website while www.mywebsiteurl.com/admin for managing web content.

Currently I have this

I don't want the header, menu and footers component to appear on any admin pages, how can I achieve that?

mike · Accepted Answer · 2020-06-22 08:55:00Z

2

Include the header, menu and footer in every route that is not admin, and don't include them in the admin route.

It is as simple as that :)

EDIT: As the suggested fix would be too long to implement, you could, in your main component, subscribe to the ActiveRoute. Upon route, you could assign true or false to a boolean, let's say admin.

Then with a ng-if remove elements that are not needed when this variable is false or true.

edited Jun 22, 2020 at 8:55

answered Jun 22, 2020 at 8:38

mike

1,8792 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iamgisnet Over a year ago

thank you for answering...But that way is very hard. considering that you have 50 pages you have to be adding them manually of all pages. Can I bind with header, menu and footer dynamically from admin page? i.e once the route is pointing to /admin page. header, menu and footer component should be deactivated or disabled. @mikegross

mike Over a year ago

Then is your main component, track the activeroute by subscribing to it and upon it assign a variable with an ngif in your dom to make the header, menu and footer disappear. It's a bit hacky but it will work.

Iamgisnet · Accepted Answer · 2020-06-22 10:53:22Z

-1

@mikegross from your guardians here's how I resolved it. Many thanks

disableComponent = false;

  constructor(location: Location, router: Router) {
    router.events.subscribe((val) => {
      if(location.path() != '/admin'){
        this.disableComponent = true;
      }else{
        this.disableComponent=false;
      }
    });
  }

<app-header *ngIf='disableComponent'></app-header>
<app-site-menu *ngIf='disableComponent'></app-site-menu>

<router-outlet></router-outlet>

<app-footer *ngIf='disableComponent'></app-footer>

answered Jun 22, 2020 at 10:53

Iamgisnet

1893 gold badges3 silver badges12 bronze badges

Collectives™ on Stack Overflow

What is a best way to have nested project in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related