CODEWITHSUNDEEP
angular
Dolf
Dolf

Reputation: 101

Access HTML attribute value from child element using Angular 2

I have an Angular 2 accordion header component whose collapsed state is stored in the class attribute of the root element.

The component includes a chevron glyphicon. I want to switch between two different chevron icons depending on the collapsed state of the root div.

I am trying to find a lazy way to use the class attribute value of my root globally in my HTML. It would be great to access the value in the child span without binding it in the components' Typescript code.

Is this possible? Here is my code:

<div [attr.class]="'panel-heading panel-heading-accordion'" data-toggle="collapse" [attr.data-parent]="parentId" [attr.data-target]="targetId"
(click)=changeCollapsedState()>
    <h4 class="panel-title">
        <span class="glyphicon glyphicon-chevron-{{attr.class === 'panel-heading panel-heading-accordion collapse' ? 'right' : 'down'}}"></span>
        <span class="space-span">&nbsp;</span>{{headingText}}
    </h4>
</div>

Upvotes: 0

Views: 1060

Answers (1)

slaesh
slaesh

Reputation: 16917

You can use a template variable. See this plunker: https://plnkr.co/edit/gW8eOY9VTgyT7d5NZOmG?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2
        class="many classes here"
        #myHeader
        [class.any]="addAnyClass"
        (click)="addAnyClass = !addAnyClass"
        >Hello {{name}}</h2>
      {{myHeader.classList.contains('any') ? 'CONTAINS ANY' : 'NO NO NO ..'}}
    </div>
  `,
})
export class App {

  private addAnyClass = false;

  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Upvotes: 2

Related Questions