CODEWITHSUNDEEP
angularangularjs-directive
Raphaël Balet
Raphaël Balet

Reputation: 8481

How to use ng-content within a directive

How can I use angular @Directive to create custom button element like angular does with their mat-button?

Let say, I'm writing

<button mat-button>Basic</button>

And angular display it like this

<button mat-button="" class="mat-focus-indicator mat-button mat-button-base">
  <span class="mat-button-wrapper">Basic</span>
</button>

How could I do this with ?

<button custom-button>Basic</button>

Upvotes: 2

Views: 3472

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

Angular material uses @Component with mat-button, as (one of the many) selector is button[mat-button]. So it's a component, not a directive (although a component extends directive, but you get the point)

You can check here how they did that.

This is part of the template they use:

<span class="mat-button-wrapper"><ng-content></ng-content></span>

Upvotes: 4

Related Questions