How ng-content and selector can help you ?

When you want to add dynamic content in a fixed view template, you should think Transclusion. This mecanism allow you to define a hook for dynamic content by using  tag.  For exemple, CardComponent is a component that uses this mechanism :

We can see this component as a template. Now, here’s how to use it :

You can see the result :

Ok, it’s fine but how to define several transclusions ? With select attribute of course ! The select attribut allows us to sort of name our , this is the selector of our tag. Let’s see it :

Now, here’s how to use it :

You can see the result :

Selectors are very interesting, you can define different patterns of selection. Here are some examples on how you can use that :

— How to use it –>

Card body
  • select as  multiple attributes

— How to use it –>

Multi attributes

— How to use it –>

select as css class

— How to use it –>

select as css class

— How to use it –>

select as Multi css class
  • select as attribute with value

— How to use it –>

Multi attribute

— How to use it –>   Content 5

If you use selector with HTML tag, we should add schema metadata property in your module, set value to NO_ERRORS_SCHEMA in your module file.

Laisser un commentaire