Below, the button won't be visible as explained in the following section. The workaround for this issue is:
We can create a new event using @Input, where we specify the callback function we want to run. If necessary, we can make this input mandatory by using
@Input({ required: true }) clickEvent!: any;
This setup ensures that the button is only displayed when an event is passed and that event is triggered successfully upon clicking.
To run the event in the parent context (this), we use bind like so:
[clickEvent]="test.bind(this)"
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
Component,
EventEmitter,
Inject,
Input,
OnInit,
Output,
output,
PLATFORM_ID,
} from '@angular/core';
@Component({
selector: 'erp-toolbar',
standalone: true,
imports: [CommonModule],
template: `
<div class="flex flex-row gap-4 justify-between items-center align-middle p-3 bg-[#FFFFFF]">
asdf
<div *ngIf="toolbarType==1 && clickEvent">
<button (click)="addClick($event)" class="btn-primary btn-success btn-sm">
<i class="icofont-plus"></i>
<span class="">new</span>
</button>
</div>
</div>
`,
})
export class ToolbarComponent implements OnInit {
@Input('toolbar') toolbarType!: any;
@Input({ required: true }) clickEvent!: any;
@Output('newevent') newEvent = new EventEmitter<any>();
constructor() {
// this.newEvent.subscribe(); <- shows only when this line is uncommented
}
ngOnInit(): void {}
addClick = (args: any) => {
this.clickEvent(args);
};
}
@Component({
selector: 'app-root',
standalone: true,
imports: [ToolbarComponent],
template: `
<erp-toolbar [clickEvent]="test.bind(this)" [toolbar]="1"/>
`,
})
export class App {
name = 'Angular';
test(e: any) {
alert('asdf');
}
}
bootstrapApplication(App);
The observed flag is only set to true when you manually subscribe to the event emitter in the typescript file.
This behavior is not evident in the provided code, hence the button won't be displayed.
Instead, toggle the button using a flag passed as @Input.
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
Component,
EventEmitter,
Inject,
Input,
OnInit,
Output,
output,
PLATFORM_ID,
} from '@angular/core';
@Component({
selector: 'erp-toolbar',
standalone: true,
imports: [CommonModule],
template: `
<div class="flex flex-row gap-4 justify-between items-center align-middle p-3 bg-[#FFFFFF]">
asdf
<div *ngIf="toolbarType==1 && this.newEvent.observed">
<button (click)="addClick($event)" class="btn-primary btn-success btn-sm">
<i class="icofont-plus"></i>
<span class="">new</span>
</button>
</div>
</div>
`,
})
export class ToolbarComponent implements OnInit {
@Input('toolbar') toolbarType!: any;
@Output('newevent') newEvent = new EventEmitter<any>();
constructor() {
// this.newEvent.subscribe(); <- shows only when this line is uncommented
}
ngOnInit(): void {}
addClick = (args: any) => {
this.newEvent.emit(args);
};
}
@Component({
selector: 'app-root',
standalone: true,
imports: [ToolbarComponent],
template: `
<erp-toolbar (newEvent)="test($event)" [toolbar]="1"/>
`,
})
export class App {
name = 'Angular';
test(e: any) {
}
}
bootstrapApplication(App);