How to include repetitive layouts with functions in multiple listview template


Hi all,

I have implemented a listview with different templates following this article:

The problem is that I have multiple templates and around 50% of the templates layouts are same and repeats in every single template. I was wondering if there is a way to include layouts and functions, so the code (view code) doesn’t have to be repeated multiple times. Any help or advise is highly appreciated. Thank you


Try creating a custom component that implements whatever the 50% layouts / views that is going to repeat in every template. Extend all templates from this custom component.



@manojdcoder thank you for suggestion. I have included a new component and it works fine, but know I have another problem. If I include a component and I try to open modal Dialog from that component modal dialog view does get updated until some event (even ngOnInit doesn’t work). I found out that it is because I am using changeDetection: ChangeDetectionStrategy.OnPush in the main component. If I remove that everything works fine. I am using ChangeDetectionStrategy.OnPush for performance reasons which are crucial for my app. Do you have any suggestions how to update modal dialog view on open. I created test app on playground:

I would be grateful if you could have a look at it. Thanks


@bachras I’m not sure what it had to do with ChangeDetectionStrategy.OnPush but just cleaning up the constructor, removing the extra common kept it working on my end without modifying ChangeDetectionStrategy. May be something with Angular compilation, not sure.


@manojdcoder what did you do exactly to make it working? I have tried everything, but nothing helped except removing ChangeDetectionStrategy.OnPush or changing to ChangeDetectionStrategy.Default in HomeComponent. Thanks


Let me know if this still works on your end


@manojdcoder no it doesn’t. Just to clarify, modal dialog opens but view is not updated, I have to click anywhere on the screen to see message “Looking for latest news”. If you remove changeDetection from HomeComponent you will see that message coming as soon as modal dialog view is loaded.


Sorry, my bad. Initially the app was crashing on my end, I was not sure why and after I cleaned up a bit it started working (honestly no idea why exactly it was crashing). Now I understand your real issue, will take a look.


ok thanks, I did some research and I think maybe NgZone should be used, but I am still new to Angular especially to Angular 2 so I don’t know how to use it properly to solve this issue.


@bachras What you are seeing is expected when using onPush, it doesn’t run change detection always unlike Default.

The framework will check OnPush components only when their inputs change or components’ templates emit events. OnPush immutability is in reference to input properties, not normal instance properties.


@manojdcoder ok I see, but if I call modal dialog from homeComponent and not from included news component, everything works as expected. How would you explain that?