Telegram Mini App Angular Back and Main buttons

I am developing a Telegram mini-app using Angular 17 and the Telegram API. I have an issue where the back and home buttons are working unexpectedly. I have home component which has 3 buttons for navigating to different component A, B and C. A and B I show both back and main buttons while in C only back button is shown. On Home the Back and Main buttons are hidden.

I have a bug where when the home component is loaded, the main button for component A is briefly shown and then hidden. And when I go to component A, B or C and then click the back button, I am redirected to Home where the back button sticks to the Home button which is supposed to be hidden.

Another bug is that when I select A from Home for the first time, all the Back and Main buttons load correctly. But when I select A for the second time, the main and back buttons do not load. This also happened when selecting B and C for the second time.

interface TgButton {
show(): void;
hide(): void;
setText(text:string): void;
onClick(fn: Function): void;
offClick(fn: Function): void;
enable() : void;
disable() : void
}

@Injectable({
providedIn: 'root'
})

export class TelegramService {

private mainButtonClickHandler?: Function;
private backButtonClickHandler?: Function;

private window: Window;
tg: any;

constructor(@Inject(DOCUMENT) private _document: Document) {
this.window = this._document.defaultView!;
this.tg = this.window.Telegram.WebApp;
}

get MainButton(): TgButton {
return this.tg.MainButton;
}

get BackButton(): TgButton {
return this.tg.BackButton;
}

setupMainButton(text: string, callback: () => void): void {
this.clearMainButton();
this.mainButtonClickHandler = callback;
this.MainButton.setText(text);
this.MainButton.onClick(callback);
this.MainButton.show();
}

setupBackButton(callback: () => void): void {
this.clearBackButton();
this.backButtonClickHandler = callback;
this.BackButton.onClick(callback);
this.BackButton.show();
}

clearMainButton(): void {
if (this.mainButtonClickHandler) {
this.MainButton.offClick(this.mainButtonClickHandler);
this.mainButtonClickHandler = undefined;
}
this.MainButton.hide();
}

clearBackButton(): void {
if (this.backButtonClickHandler) {
this.BackButton.offClick(this.backButtonClickHandler);
this.backButtonClickHandler = undefined;
}
this.BackButton.hide();
}

sendData(data: object): void {
this.tg.sendData(JSON.stringify(data));
}

ready(): void {
this.tg.ready();
}

}


Home Component

export class HomeComponent implements OnInit {

constructor(public telegram: TelegramService,private router: Router) {}

ngOnInit(): void {
this.configureTelegramButtons();
}

private configureTelegramButtons() {
// Explicitly hide the MainButton when the search component is loaded
this.telegram.clearMainButton();
this.telegram.clearBackButton();
this.telegram.ready();
}

goToA(){
this.router.navigate(['/toA'], { });
}

goToB(){
this.router.navigate(['/toB'], { });
}

goToC() {
this.router.navigate(['/myTrips'], { });
}
}


Home View

<div>
<div>
<div>
<button (click)="goToA()" >A</button>
<span>Trip</span>
</div>
<div>
<button (click)="goToB()">B</button>
<span>Vehicle</span>
</div>
<div>
<button (click)="goToC()">C</button>
<span>Trips</span>
</div>
</div>
</div>


Component A

export class AComponent implements OnInit, OnDestroy {
constructor(
private router: Router,
private telegram: TelegramService
) {}

ngOnInit(): void {
this.setupTelegramButtons();
this.fetchVehicleDetails();
}

ngOnDestroy(): void {
this.telegram.clearBackButton();
this.telegram.clearMainButton();
}

private setupTelegramButtons(): void {
// Setup MainButton with text and callback for adding a trip
this.telegram.setupMainButton("Add", () => this.add());

// Setup BackButton with callback for navigation
this.telegram.setupBackButton(() => this.goBack());

this.telegram.ready();
}

goBack(): void {
this.router.navigate(['/home']);
}

async add(): Promise<void> { }
}


Component B

export class BComponent implements OnInit, OnDestroy {
constructor(
private router: Router,
private telegram: TelegramService
) {}

ngOnInit(): void {
this.setupTelegramButtons();
this.fetchVehicleDetails();
}

ngOnDestroy(): void {
this.telegram.clearBackButton();
this.telegram.clearMainButton();
}

private setupTelegramButtons(): void {
// Setup MainButton with text and callback for adding a trip
this.telegram.setupMainButton("Minus", () => this.minus());

// Setup BackButton with callback for navigation
this.telegram.setupBackButton(() => this.goBack());

this.telegram.ready();
}

goBack(): void {
this.router.navigate(['/home']);
}

async minus(): Promise<void> { }
}


Component C

export class CComponent implements OnInit, OnDestroy {
constructor(
private router: Router,
private telegram: TelegramService
) {}

ngOnInit(): void {
this.fetchTrips();
this.setupBackButton();
}

ngOnDestroy(): void {
this.telegram.clearBackButton();
}

private setupBackButton(): void {
this.telegram.setupBackButton(() => this.goBack());
this.telegram.ready();
}

goBack(): void {
this.router.navigate(['/home']);
}

}

Continue reading...