Skip to main content

Access Parent Component

Using @Input and a little trick to send the this of the parent to the child. I guess you can do it the other way around also, to access child from parent via an @Output

Parent Component

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<app-child [parnt]="var2"></app-child>',
    style: ''
})
export class AppComponent {
    title = 'app works!';
    var1 = "val1";
    var2 = this;
}

Child Component

import { Component, Input, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '{{parnt.var1}}',
  style: ''
})
export class ChildComponent implements OnInit {
  @Input() parnt;
}

You should see "val1" printed, the value of the var1 of the parent printed in the child template.