angular - How to access functions declared inside component.ts of an angular library?

Question

I’m building an angular library (let’s consider it as ‘mylib’). In this library, I have used only the mylib.component.ts file. I added the html element codes inside the template variable of this file. And the functions that are used to do modifications to those html elements are also in the same component.ts file. I successfully built it and published to npm. But when I try to install and use it in a new project, it says that such functions doesn’t exist. What have I done wrong? All I want to know is, how to access the functions declared inside component.ts of an angular library. If it's not possible, then what should I do to access these functions after installing this library in another project?

mylib.component.ts

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

@Component({
  selector: 'srr-mylib',
  template: `
    <h1> Random Text </h1>
  `,
  styles: [
  ]
})
export class ElapsedtimerComponent implements OnInit {

 
  constructor() { }

  ngOnInit(): void {
  }

  startTrans(){

    //some code here

  }
}

mylib.module.ts

import { NgModule } from '@angular/core';
import { MylibComponent } from './mylib.component';
import { CommonModule } from '@angular/common';  
import { BrowserModule } from '@angular/platform-browser';



@NgModule({
  declarations: [MylibComponent],
  imports: [
    CommonModule,
    BrowserModule
  ],
  exports: [MylibComponent]
})
export class MylibModule { }

public.api.ts

/*
 * Public API Surface of mylib
 */

export * from './lib/mylib.service';
export * from './lib/mylib.component';
export * from './lib/mylib.module';

And this is how i tried to use the above library in a new project

app.component.html

<srr-mylib></srr-mylib>

app.component.ts

import { Component } from '@angular/core';
import { MylibModule } from '@somename/mylib'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(
    private libz:MylibModule
  ) {
 
  libz.startTrans()  //<----- this doesn't work. it gives the error as "Property 'startTrans' does not exist on type 'MylibModule'.ts(2339)"
  }
 

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MylibModule } from '@somename/mylib'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MylibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

In Angular, a component should not call directly an other component's method. So from what I understand of what you try to do, I would use an @Input instead, which triggers a function call:

mylib.component.ts

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

@Component({
  selector: 'srr-mylib',
  template: `
    <h1 [ngStyle]="{'font-size': myFontSize}"> Random Text </h1>
    <button type="button" (click)="onClickPlusFontSize()">Larger font size</button>
  `,
  styles: [
  ]
})
export class ElapsedtimerComponent implements OnInit, OnChanges {

  @Input() inputFontSize: number;
  @Output() inputFontSizeChange: EventEmitter<number> = EventEmitter();

  public myFontSize: string;

  constructor() {
  }

  ngOnInit(): void {
  }


  ngOnChanges(changes: SimpleChanges): void {
    if (changes.inputFontSize) {
      // triggered every time the @Input value changes
      this.onFontSizeChange(changes.inputFontSize.currentValue);
    }
  }

  onFontSizeChange(newFontSize) {
    this.myFontSize = `${newFontSize}px`;
    // some other stuff
  }

  onClickPlusFontSize() {
    this.inputFontSize++; // updates the value
    onFontSizeChange(this.inputFontSize); // triggers the function that should be called, as if the change came from the parent
    this.inputFontSizeChange.emit(this.inputFontSize) // tells the parent that the value changed
  }
}

app.component.html

<srr-mylib [(inputFontSize)]="myLibFontSize" (inputFontSizeChange)="onFontSizeChange($event)"></srr-mylib>

app.component.ts

import { Component } from '@angular/core';
import { MylibModule } from '@somename/mylib'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myLibFontSize: number;

  constructor() {
    this.myLibFontSize = 12; // will trigger ngOnChanges on myLib
  }

  onSpecificEvent() {
    // do stuff
    this.myLibFontSize = 20; // will also trigger ngOnChanges on myLib
  }
 
  onFontSizeChange(newFontSize: number) {
    // this method is optionnal.
    // with '[(inputFontSize)]="myLibFontSize"' in the HTML, the value of 'myLibFontSize' will already be updated automatically.
    // this function is only useful if the parent wants to do specific work when the value changes.
    // so there is absolutely no need to do "this.myLibFontSize = newFontSize" here.
    // the only thing to know, is that you have no clue of either 'myLibFontSize' will be updated after of before 'onFontSizeChange' is called.
    // So always use 'newFontSize' in this method, to be sure of the value used.
    console.log('myLibFontSize value changed !', newFontSize);
  }

}