In my Angular library, there is a component called AComponent which has its own template, methods, and properties. Once the Angular library is packaged, it becomes available as a NuGet package for other projects to utilize.
@Component({
selector: 'xxx-editor',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
})
export class AComponent implements OnInit {
......
......
logToConsole() {
console.log('trace for working');
}
}
A new requirement has come up where I need to expose the method logToConsole in AComponent so that external parties can call this method using the component.
Let's say that this library is being used by BComponent and accessed as ViewChild inside the *.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;
}
The issue arises when trying to access this.editor.logToConsole(). The error states that logToConsole is undefined. Is this how the Angular library is designed? Is there a way for me to access this method?