Can Angular bind a click event dynamically from a component to another existing component on the page? Check out this image for reference.
In my app, I have 4 simple components - a shell component that defines the layout, a header component (blue outline) and a navigation component (red outline) within the shell component. The green component represents the current route-loaded component.
To update the navigation component, I use a basic service setup like this:
@Injectable({ providedIn: 'root' })
export class NavigationService {
private titleSource = new Subject<string>();
private actionsSource = new Subject<ActionButton[]>();
private menuItemsSource = new Subject<MenuItem[]>();
title = this.titleSource.asObservable();
actions = this.actionsSource.asObservable();
menuItems = this.menuItemsSource.asObservable();
constructor() {
}
setTitle(title: string) {
this.titleSource.next(title);
}
setActions(actions: ActionButton[]) {
this.actionsSource.next(actions);
}
setMenuItems(menuItems: MenuItem[]) {
this.menuItemsSource.next(menuItems);
}
}
The navigation component simply integrates with this service as follows:
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html'
})
export class NavigationComponent implements OnInit {
title: string = "";
actions: ActionButton[] = [];
menuItems: MenuItem[] = [];
constructor(private navigation: NavigationService) {
navigation.title.subscribe((title) => this.title = title);
navigation.actions.subscribe((actions) => this.actions = actions);
navigation.menuItems.subscribe((menuItems) => this.menuItems = menuItems);
}
}
The navigation is displayed using this code snippet:
<div class="navigation">
<div *ngIf="title.length" class="navigation__title">
<h1>{{title}}</h1>
</div>
<div class="navigation__menu">
<ul>
<li *ngFor="let menuItem of menuItems" [routerLinkActive]="['active']">
<a routerLink="{{menuItem.path}}">{{menuItem.title}}</a>
</li>
</ul>
</div>
<div class="navigation__actions">
<a *ngFor="let actionButton of actions" class="btn btn--primary">{{actionButton.title}}</a>
</div>
</div>
Next, in the currently active component (the green one), I manage the title and items like this:
....
constructor(private employeeService: EmployeeService, private navigation: NavigationService, private drawerService: NzDrawerService) {
navigation.setTitle('');
navigation.setActions([
{
path: '',
title: 'Add Employee'
}
]);
navigation.setMenuItems([
{
path: '/employees',
title: 'Employees'
},
{
path: '/teams',
title: 'Teams'
}
]);
}
....
Additionally, in this same active component, I have defined a method named 'createEmployee':
createEmployee() {
const drawer = this.drawerService.create<CreateEmployeeComponent>({
nzContent: CreateEmployeeComponent,
nzClosable: false,
nzWidth: '33%',
});
drawer.afterClose.subscribe(data => {
this.loadEmployees();
});
}
Now, my query involves whether it's feasible to invoke this method by clicking the button generated within my navigation component. Moreover, can this be set dynamically from the currently activated component similar to how we handle the title and navigation items?