Angular 2 add a string(css-class) to parent Component

Question

How may I add a string(css-class) to the parent Component? Different pages should be able to add a class to the container element.

app.component.ts:

@Component({
  selector: 'app-root',
  template: `
        <div class="container {{ ADD HERE }}">
             <router-outlet></router-outlet>
        </div>
  `
})
export class AppComponent {
  title = 'app works!';
}

page1.component.ts:

@Component({
  template: `
      <p>I'm page 1!</p>
  `
})
export class Page1Component {
      containerClasses = "page-1";
}

Günter Zöchbauer · Accepted Answer · 2018-05-08 16:17:48Z

6

@Component({
  template: `
      <p>I'm page 1!</p>
  `
})
export class APageComponent {
  constructor(private elRef:ElementRef) {
  }

  containerClasses = "page-1";

  ngAfterViewInit() {
    this.elRef.nativeElement.parentElement.classList.add(this.containerClasses);
  }
}

edited May 8, 2018 at 16:17

answered Jan 3, 2017 at 20:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Mick Over a year ago

I may also want to share more informations like "display the header?" from child to parent component. Also the element must not be the parent in dom to access it with nativeElement.parentElement

Günter Zöchbauer Over a year ago

Sure, you can always use a shared service for component communication angular.io/docs/ts/latest/cookbook/…

Günter Zöchbauer Over a year ago

@SuttonY glad to hear :)

Collectives™ on Stack Overflow

Angular 2 add a string(css-class) to parent Component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related