passthrough variable to nested component

Question

There must be a more elegant way of doing this.

I'm simply; passing this boolean flag from the page markup through to the subcomponent:

<span *ngIf="flushToText">
    <span 
        class="icon flushToText" 
        [title]="tooltip" >
    </span> 
</span>
<span *ngIf="!flushToText">
    <span 
        class="icon" 
        [title]="tooltip">
    </span> 
</span>

Essentially, this says: if flushToText is TRUE, then add class flushToText.

(Here's the markup that invokes it:)

    <app-td-label 
            id="industry" 
            tooltip="Enter key words" 
            bold="true"
            flushToText="true">
    </app-td-label>

I tried ng-class, but I could not seem to get the right syntax. I tried every combination of quotes and brackets:

        ng-class="flushToText: flushToText"
        ng-class="'flushToText': flushToText"
        ng-class="{'flushToText': flushToText==true}"

etc.

SiddAjmera · Accepted Answer · 2019-02-07 16:11:40Z

1

There are a few issues with your implementation. The ng-class is an AngularJS(1.x) syntax and won't be applicable to Angular(2+).

The syntax in Angular has changed to:

<span 
  class="icon"
  [class.flushToText]="flushToText">
  {{ tooltip }}
</span>

Alternatively, you could also use this:

<span 
  class="icon"
  [ngClass]="{ 'flushToText': flushToText }">
  {{ tooltip }}
</span>

Here's a Working Sample StackBlitz for your ref.

answered Feb 7, 2019 at 16:11

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaveC426913 Over a year ago

Thanks. The second one is what I see it as the more 'standard' method.

TheParam · Accepted Answer · 2019-02-07 15:49:55Z

0

To access class variable you need to property binding syntax of Angular

[class.class-name] = "classVariableName"

So in your case bind like below

[class.flushToText] = "flushToText"

answered Feb 7, 2019 at 15:49

TheParam

10.6k4 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

passthrough variable to nested component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related