selecting elements within an Angular 4 component using selectors

Question

selecting elements within an Angular 4 component using selectors

I've been working on developing a new message system that utilizes toaster notifications:

My main query revolves around expanding the capabilities to enable multiple alert components that can be specifically targeted within various templates.

For instance, in the root app.component.html template, it would include:

<alert root></alert>

While a sub component would contain:

<alert subcomponent></alert>

The current setup of the toaster tutorial (component) will target any instance of the alert component in a template.

If there were two instances, they both receive the same message when the service is activated.

My goal is to introduce an additional parameter in the service call:

this.alertService.success(message,target);

angular typescript components alert messaging

Answer 1

Answer №1

An attribute called target can be used in the alert directive component to specify a string input.

The alert component will only display when triggered by the alert service if the target matches:

alert.component.ts

// Include this input
@Input() target: string;

ngOnInit() {
    this.alertService.getAlert().subscribe((alert: Alert) => {
        // Check if the alert's target matches the component's target
        if (alert.target === this.target) {
            this.alerts.push(alert); 
        }
    });
}

alert.service.ts

// Each alert function accepts an additional target parameter, which can have a default value such as "root"

root.component.html

<alert target='root'></alert>

other.component.ts

// Triggering an alert
this.alertService.success(
    message='operation success', 
    target='root'
)

Answer 2

An attribute called target can be used in the alert directive component to specify a string input.

The alert component will only display when triggered by the alert service if the target matches:

alert.component.ts

// Include this input
@Input() target: string;

ngOnInit() {
    this.alertService.getAlert().subscribe((alert: Alert) => {
        // Check if the alert's target matches the component's target
        if (alert.target === this.target) {
            this.alerts.push(alert); 
        }
    });
}

alert.service.ts

// Each alert function accepts an additional target parameter, which can have a default value such as "root"

root.component.html

<alert target='root'></alert>

other.component.ts

// Triggering an alert
this.alertService.success(
    message='operation success', 
    target='root'
)

selecting elements within an Angular 4 component using selectors

Answer №1

alert.component.ts

alert.service.ts

root.component.html

other.component.ts

Similar questions

Using Angular2 to bind one-way data to a JSON attribute

Error when navigating to a dynamic parameter path using Angular Router

Leveraging TypeScript's declaration file

What is the reason for certain packages not being placed in the vendor folder during an Angular 2 installation?

Sharing variables between components within the same file in Angular 6

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

Modify the value of the <select> tag based on whether it is required or not

Injecting properties into higher order functions in Typescript allows for the dynamic customization

Angular 4 - Issue with Top Navigation Bar not remaining fixed at the top of the page

Calculating the annual total in angular 4 - a step-by-step guide

Deleting a NativeScript ImageAsset that was generated using the nativescript-camera module - Easy Steps!

Angular's HttpClient.get method seems to have trouble retrieving real-time data from a Firebase database

What is the proper method for integrating a loader into an observable HTTP request?

What is the best way to include generic HTML content in an Angular 2 component?

Specifications for TypeScript Columns

Error encountered in TypeScript's Map class

Angular button disable feature malfunctioning

Tips on using services for storing and fetching list data in Angular

Guide to setting up identically named properties in Child container components

Encountering issues with utilizing global variables in Ionic 3