Using alert message from other component in angular

Question

I googled several examples about using functions/variables from other components in Angular 4/5. They helped me a bit for understanding but I still couldn't figure out the solution to my problem.

I wanna call a standard JavaScript alert from another component.

I have a component, which has a variable like this:

center.ts

export class CenterPage {
  public message = new alert("Warning");

center.html

<products [message]="message"></products>

I'm using @Input to get the message in products.ts

export class ProductsComponent {
  @Input() message;

Now I want to show the alert, when the user clicks on a button in product.html

<button (click)="message"></button>

This seems to be wrong and I think this is not the right way how I'm trying to show the alert when the user clicks on the button.

How can I do this correctly?

EDIT

This is only one example. In the end I will have to call the same alert in several components. So I try to have only one function which I can call from all components so I won't have redundant code.

What's alert? Is that a class you created? Or are you trying to call a standard JavaScript alert() function? — Robby Cornelissen
– Robby Cornelissen, Commented Apr 5, 2018 at 8:23
Good question, totally missed the fact it could be a custom class. But as far as I know you should not be able to use alert as a class name since it's a built in function. — Aer0
– Aer0, Commented Apr 5, 2018 at 8:25
Oh sorry, I forgot, I will edit my post. It's the normal JavaScript standard — BlueCat
– BlueCat, Commented Apr 5, 2018 at 8:27

Aer0 · Accepted Answer · 2018-04-05 08:28:22Z

11

You should rather put the string into your component instead of the whole alert itself. Afterwards you can call the alert in your click handler.

Only pass the string to your child component.

export class CenterPage {
  public message = "Warning";

Handle the click within a dedicated function.

<button (click)="myFunc"></button>

Do your logic stuff in your function.

public myFunc() {
  alert(this.message);
}

edited Apr 5, 2018 at 8:28

answered Apr 5, 2018 at 8:23

Aer0

3,91720 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BlueCat Over a year ago

Thanks, that's a good idea but the problem is, that I need to call this alert from several components and then I would have to add "myFunc()" in every single component. I'm trying to avoid redundant code

Aer0 Over a year ago

Use a Service instead. You'd just need to inject the service into all components.

BlueCat Over a year ago

Ya I found this solution too when I googled but it seems kinda "exaggerated" to me for just using an alert.. Isn't there a easier way?

Aer0 Over a year ago

You could also stick to your solution as long as you pass in a whole function (like myFunc()) to @Input() message. Yet this isn't the best approach. Best practice would be to use a Service instead.

matirmv · Accepted Answer · 2018-04-05 09:15:11Z

2

You definitely have to use a service for such a functionality. You have to create a "service" folder in which you will create like a alert.service.ts file. in this file you will define the alert function you want to display in all your components.

Then you will import this service in the components which need it.

I suggest you to read this tuto from the angular documentation, which is really handy : https://angular.io/tutorial/toh-pt4

answered Apr 5, 2018 at 9:15

matirmv

2812 silver badges14 bronze badges

1 Comment

adnako Over a year ago

this is definitely wrong answer. The messages service in the tutorial just collects messages for presenting and its component with the same name grabs them via Rx and presents on the screen.

Collectives™ on Stack Overflow

Using alert message from other component in angular

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related