What is the proper/preferred way for an Angular component to expose an API (in a library)?

Consider this oversimplified component:

test.component.html
​

<button>{{buttonData}}</button>

test.component.ts
​

import {Component} from '@angular/core';

@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent {
buttonData: string = 'Test';

changeButtonContents(data) {
this.buttonData = data;
}
}


Now, considering this other component:

other.component.html
​

<app-test></app-test>


What is the best way to expose an "API" from the app-test component? By API, I mean callable methods and settable variables. As far as I know, we can only pass in variables as [property]='bindings'

One way would be to @ViewChild it, but that "feels" wrong, and it also gives full access to the component, unlike exposing an API.

Continue reading...