Hi Andreas,
I think ng-content could be a solution.
see for instance :
https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
In your template you define where the content has to be projected :
<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>
<ng-content></ng-content>
</mat-expansion-panel>
Then if the selector of your component is app-my-component you can use it
like this :
<app-my-component title='the title' description='the description'>
The content to project
<app-another-component></app-another-component>
</app-my-component>
Note that ng-content can be used with selectors if you need to inject
several contents.
Regards,
Aranud.
Le vendredi 23 février 2018 19:53:24 UTC+1, Andreas Melcher a écrit :
>
> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
