I have app_form and app_input components (directives) for angular2. I can use them in template in different ways:
template: `
<app_form>
<app_inp></app_inp>
</app_form>
`
and independently:
template: '<app_inp></app_inp>'
In the first case, the directive app_inp is added by calling a function from parent, and in the second everything works as usual in angular2. Anybody know how to do it? Thank you.
UPD:
export class InputComponent {
constructor() {}
ngAfterViewInit() { // maybe ngAfterViewInit isn't the best way
if(!isHasParentForm){ // if we have parent directive app_form
// we run some logic for adding our component
} else {
// if we don't have parent like app_form we run different logic
}
}
}
There may be situations where you want to access a directive, child component, or a DOM element from a parent component class. The ViewChild decorator returns the first element that matches a given directive, component, or template reference selector. ViewChild makes it possible to access directives.
While this overview of the Parental Interests Directive addresses its effect on certain parents and legal guardians, the Directive provides only internal ICE policy guidance, which may be modified, rescinded, or superseded at any time without notice.
The parent component was able to call the child component’s whoAmI method. You have learned to use ViewChild to access a directive, child component, and a DOM element from a parent component class. If the reference changes to a new element dynamically, ViewChild will automatically update its reference.
This law requires that hospitals, nursing homes and other health agencies give all patients information about their right to have a legal document called an advance directive. Application of the PSDA regulations and creation of comparable Advance Directive documents in the pediatric setting are evolving very slowly despite a clear need.
If the type of the parent is known statically, you can just inject it
@Component({
selector: 'form-cmp',
providers: [],
template: `
<div>form</div>
<ng-content></ng-content>
`,
directives: []
})
export class FormComponent {}
@Component({
selector: 'my-inp',
providers: [],
template: `
<div>myInp</div>
`,
directives: []
})
export class MyInput {
constructor(private form:FormComponent) {
console.log(form);
}
}
@Component({
selector: 'my-app',
providers: [],
template: `
<form-cmp>
<my-inp></my-inp>
</form-cmp>
`,
directives: [FormComponent, MyInput]
})
export class App {}
Plunker example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With