Create custom directive/component for ion-header


#1

Hello,
I’m working on a new mobile app using ionic 2 + angular 2 + cordova.
I want to create a directive that will allow customize ion-header.
e.g. apply custom ion-title, subtitle, show/hide back, home buttons, background colors, expand height and add avatar etc.,
to be used all over the app
I thought on two options:

  1. Declare ion-header with it’s corresponding children (nav-bar, ion-title etc.) on every component, and use the directive to manipulate them.
  2. Declare only ion-header selector, and append/push the relevant child to him.
    My questions are:
  3. How to create ionic component dynamically in my directive, and append them to ion-header?
  4. Is there a way to create component instead of directive to be used the same way?
    (like header user control in web forms.)
  5. If option 1 is the possible one, is there any away to drill down to all children other then el.children[0].children[3]?

Other options will be welcomed!