How to call Angular Component Method Outside of Angular Library using @ViewChild()?

Question

I have angular library with expose component call AComponent. AComponent has template and set of method and properties. Once angular library is package it is expose as nuget package so other projects can be used it.

@Component({
  selector: 'xxx-editor',
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.scss'],
})
export class AComponent implements OnInit {
......
......

 logToConsole() {
        console.log('trace for working');
 }

}

I have a new requirement so for cater that requirement I want to expose one of the method logToConsole in AComponent to outside so relying party can call the method using the component.

Will say this library is used by BComponent and access as ViewChild inside *.ts file

BComponent - Template

 <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <xxx-editor #xxxEditor [(ngModel)]="html" [editable]="true"
                        ></xxx-editor>

    </div>

BComponent - Ts

 @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit(): void {
        this.editor.logToConsole();
      }
      title = 'editor-test';

      html = 'sample test data';

      @ViewChild('xxxEditor') editor: AComponent | null;
    }

Problem is this.editor.logToConsole() logToConsole is undefined. Is it how design angular library? Is there anyway I can access this method?

Nithya Rajan · Accepted Answer · 2019-02-21 12:37:30Z

4

It's because the ngOnInit() life cycle method gets invoked before angular renders the DOM. You should call that method inside ngAfterViewInit() which gets invoked once the view is rendered.

ngAfterViewInit(): void {
   this.editor.logToConsole();
}

Angular Docs - Description

ngOnInit

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

ngAfterViewInit

Respond after Angular initializes the component's views and child views / the view that a directive is in.

answered Feb 21, 2019 at 12:37

Nithya Rajan

4,93422 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to call Angular Component Method Outside of Angular Library using @ViewChild()?

1 Answer 1

Angular Docs - Description

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Angular Docs - Description

Comments

Related