2

SOLVED

I have few components : - home component, default header, detail component, detail header component
Both headers have different layouts

Let say at Home page, it will display 'Default header',
When user at Detail Page, it will display 'Detail Header'

So my logic is to do some if else in app.component.ts Unfortunately, it doesn't show as expected.
How to do in Angular2? I have problem to switch the header.

This is my app.component.ts

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./main.css'],
  template: `
    <div class="main-body">
      <app-header *ngIf="!showHeaderB()"></app-header>
      <detail-header *ngIf="showHeaderB()"></detail-header>
      <div class="container">
        <small><api-error></api-error></small></div>
        <router-outlet></router-outlet>
      </div>
      <app-footer></app-footer>
      <template ngbModalContainer></template>
    </div>
  `
})

export class AppComponent {
  showHeaderB(){
    if (this.router.url.startsWith('/detail/')) {
      return true;
    } else {
      return false;
    }
  }
}
weikian
  • 260
  • 2
  • 5
  • 14
  • Maybe this may help you http://stackoverflow.com/questions/40331382/change-a-html-element-in-app-component-dynamically – Ranjith Varatharajan Mar 11 '17 at 06:30
  • So, what's the problem with the code you posted. What are you doing, what do you expect to happen, and what happens instead? – JB Nizet Mar 11 '17 at 12:03
  • Sorry for confusing First - I have a few headers for different pages. Home page use 'Header A' Detail page use 'Header B' So, when user at Home Page, it will show 'Header A' If user at Detail Page, it will show 'Header B' I'm thinking to do some logic in app.component.ts, and still stuck on it. I not sure the way that I did is correct or wrong and some how it doesn't show as expected. – weikian Mar 11 '17 at 12:26
  • If it doesn't show as expected, it can mean 2 things. 1. there is an exception, and you should see it in your console. 2. your method returns true instead of returning false, or vice-versa. So, check what the url is. Use your debugger. Add console.log() statements in the code. – JB Nizet Mar 11 '17 at 12:31
  • See http://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router/38652281#38652281 – Günter Zöchbauer Mar 11 '17 at 13:56

2 Answers2

0

Have a page-header as a separate component. 

@Component({
  selector: 'page-header',
  template: `
    <div> {{title}}</div> 
  `,
})
export class PageHeader {

  @Input() title:string="";

}

In each of your component you should include that component and assign title to it.

@Component({
  selector: 'component-1',
  template: `
    <div>
      <page-header title="pageTitle"> </page-header>
      ...
    </div>
  `,
})

export class Component1 {

pageTitle:string;

}

@Component({
  selector: 'component-2',
  template: `
    <div>
      <page-header title="pageTitle"> </page-header>
      ...
    </div>
  `,
})

export class Component2 {

pageTitle:string;

}
Aravind
  • 40,391
  • 16
  • 91
  • 110
  • Thanks for the answer and I'm really appreciate it, but question is not to change the 'page title'. I mean to show different headers because my headers have different layouts when route to different pages. :) – weikian Mar 11 '17 at 12:47
  • you are looking **not to change the header of which component** and when? – Aravind Mar 11 '17 at 12:53
  • For example, **Home page** shows **Default Header**, when user at **Detail Page**, it will shows **Detail Header**. The rest of the pages will show **Default Header** – weikian Mar 11 '17 at 12:57
  • this you should handle by separating components as needed. I will update the post with a demo in sometime. hangon – Aravind Mar 11 '17 at 12:59
  • For your problem, @Aravind 's solution is much simpler and suitable. Additionally parsing the title value will help you better. – Saiyaff Farouk Mar 11 '17 at 13:02
  • Thank you so much. There is an existing page for your reference: Take a look at headers there Home page = [link] (http://jobscentral.com.sg) Detail page = [link] (http://jobscentral.com.sg/job/driver-goods-delivery-jjh6rr79w0pry9xggb8?APath=2.21.0.0.0&showNewJDP=yes&IPath=JRKCVT) – weikian Mar 11 '17 at 13:03
0

You should change your showHeaderB() method into this

lets say, that you have your url like this localhost:8080/..../..../detail/.... your position of detail is 4, so you set parameter for position 4

showerHeaderB(){
    if (this.router.url.startsWith('/detail', 4)) {
        return true;
     } else {
            return false;
      }
    }
Tekila Aliket
  • 1
  • 1