0

I am building a small application but this is my problem, I have a landing page with a search box in the middle, this page has a footer. All this page does is query something then navigate to a listing page. In the listing page I do not need the footer anymore, but later other screen may use it. My problem i have been having so far is that if my landing page with the search bar has a background image for the body, i have to do some monkey business in my listing page to remove it as well as the footer.

Is there a way I could have a page in Angular 4, say my index.html where this has a component (other than the <app-root>), this component will have all the head and html needed for that landing page but then when i navigate to the listing one , i want to have a different body and then here add the <app-root> but then i am not sure how my routing will work.

It comes down to be able to apply css to my body from anywhere in the app without having to do monkey business from the child components to add classes or remove them.

Bear with me, i am new to Angular4 and i am paying the price.

Kaustubh Khare
  • 3,280
  • 2
  • 32
  • 48
jedgard
  • 868
  • 3
  • 23
  • 41
  • you can try using ng-template and put all the details inside that and depending upon the component you can have a switch – Rahul Singh Dec 06 '17 at 06:01
  • This sounds promising, do you have an example?. – jedgard Dec 06 '17 at 06:05
  • 1
    i donot have a example but you can look at https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ or this https://stackoverflow.com/questions/46770046/how-to-best-conditional-template-show-in-angular-4 – Rahul Singh Dec 06 '17 at 06:07

0 Answers0