Hi, I try to do the following:

my app consists of 4 main components. For now I simply want them to be 
<mat-expansion-panel>s (Angular Material).
So each of the 4 components has a header with title and description and 
then a content panel with different content that can be opened/closed 
independently from each other .

I thought about making an abstract base class with the html of the 
<mat-expansion-panel>, something like this

<mat-expansion-panel [expanded]="true">

<mat-expansion-panel-header>
<mat-panel-title>
{{title}}
</mat-panel-title>
<mat-panel-description>
{{description}}
</mat-panel-description>
</mat-expansion-panel-header>

<!-- different content -->

</mat-expansion-panel>

Now the problem is (I'm just starting with angular) how do I inject the 
content?

*Idea0*
My first idea would be to add an abstract getContent():component method to 
the base class that the children could override but I think that is not 
angular-like or not possible. 

Now I'm thinking about what *the angular way* of doing something like this 
could be.
I have different ideas but it's hard to rate them because of my missing 
experience. I would love to get some help thinking it through to not loose 
one day per idea trying it out and reverting again.

*Idea 1*
Of course I can simply copy the code to each component. But everytime I 
decide to change something I would have to change it everywhere.

*Idea 2*
Instead of having the html above in a base class or copied to each 
component I could just have it 4 times in the parent component.
Pro: the problem is kind of gone
Contra: the template for the 4 components should be in the template files 
of the components?!

*Idea 3*
I put the header in a template and somehow inject it into the 4 components
Pro: at least the header is not copied
Contra: Beside the header template everything else is still copied 4 times. 

I guess <ng-template> and ViewContainerRef is somehow made for this? Anyone 
can point me to a similar example?
Thanks a lot
Andy


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to