Reputation:

Angular ng-content hide certain elements

I don't know if this is possible or has ever been attempted but I want to be able to have a ng-content which then has some logic to determine elements that cannot be shown.

So basically, I am working with a pdf and I have a component with the selector of <printable> which is literally just a ng-content and some logic behind the scenes to get the pdf out of the content input.

I'm thinking, in certain scenarios that some of the content within will need to be hidden based on a condition but maybe only hidden for printing.

I didn't know whether it was possible to add an attribute to the elements within and target them to hide them.

Take the following example...

<printable>
    <table>
       <tr>
          <td>1</td>
          <td>John Doe</td>
          <td>£100.00</td>
       <tr>
       <tr [hidden]>
          <td>2</td>
          <td>Jane Doe</td>
          <td>£200.00</td>
       <tr>
    </table>
</printable>

Then within the printable component I can hide this component from rendering?

Upvotes: 0

Answers (4)

Srimoyee Sen

Reputation: 191

You can try <*ngIf="somecondition"> within the block

Upvotes: 2

Timothy

Reputation: 3593

Content projection just project the content from parent component to the child one... You can project it conditionally in any possible ways, for example:

Condition defined in a parent component

// showFirstRow is a prop of parent component
<printable>
    <table>
       <tr *ngIf="showFirstRow">
          <td>1</td>
          <td>John Doe</td>
          <td>£100.00</td>
       <tr>
    </table>
</printable>

Alternatively you can project like

<printable>
  <thead theader>
    <th></th>
  </thead>
  <tbody tcontent>
    <tr></tr>
  </tbody>
</printable>

// PrintableComponent template
<ng-content select="[theader]"></ng-content>
<ng-content select="[tcontent]"></ng-content>

and apply styles in printable component accordingly

Upvotes: 0