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.