Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get parent directive in child

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
    }
  }
}
like image 834
dellink Avatar asked Jun 17 '16 12:06

dellink


People also ask

How do I access a directive from a parent component?

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.

How does the parental interests directive affect parents and legal guardians?

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.

How does the parent component call the child component whoami method?

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.

Do pediatric hospitals need advance directives?

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.


1 Answers

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

like image 110
Günter Zöchbauer Avatar answered Sep 25 '22 11:09

Günter Zöchbauer