vendredi 3 août 2018

Why/when would ng-content b a good practice?

Maybe a strange question regarding ng-content / Content projection. I get the idea that you can dynamically put in 'content' which can in turn be projected by using ng-content. One thing I could also do to achieve this is to make an Input property to pass in the information I want to show in the component.

I've come across this project; https://trimox.github.io/angular-mdc-web/#/home which is the new material components for Angular. One thing I found out while browsing through the code is that he makes extreme use of ng-content to project some 'sub-components'. I cant help but wonder... why?? Because I can also try and solve this using one card component and a JSON/object like configuration which I pass on.

<mdc-card class="demo-card">
<mdc-card-primary-action mdc-ripple>
    <mdc-card-media class="demo-card__media--16-9" [wide]="true"></mdc-card-media>
    <div class="demo-card__primary">
        <h2 class="demo-card__title" mdcHeadline6>Our Changing Planet</h2>
        <h3 class="demo-card__subtitle" mdcSubtitle2>by Kurt Wagner</h3>
    </div>
    <div class="demo-card__secondary" mdcBody2>
        Visit ten places on our planet that are undergoing the biggest changes today.
    </div>
</mdc-card-primary-action>
<mdc-card-actions>
    <mdc-card-action-buttons>
        <button mdc-button mdcCardAction="button">Read</button>
        <button mdc-button mdcCardAction="button">Bookmark</button>
    </mdc-card-action-buttons>
    <mdc-card-action-icons>
        <button mdcIconButton mdcCardAction="icon" iconOn="favorite" iconOff="favorite_border"></button>
        <mdc-icon mdcCardAction="icon" mdcRipple>share</mdc-icon>
        <mdc-icon mdcCardAction="icon" mdcRipple>more_vert</mdc-icon>
    </mdc-card-action-icons>
</mdc-card-actions>

Above you can see for example a 'card' component with several items in it. I've also found the source for these components; https://github.com/trimox/angular-mdc-web/blob/master/packages/card/card.ts.

My original question remains; when is it a good practice to use ng-content and when it's not. and why is it a good practice? I;ve also see DevExpress use it in their devextreme library; https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordGrouping/Angular/Light/

Thanks




Aucun commentaire:

Enregistrer un commentaire