Steps for showing an alert with sweetalert when a condition is met

I am currently working on an Angular application and I am trying to display an alert using SweetAlert if a certain condition is met. How can I achieve this without the need for a click button?

I attempted to implement the following code but it did not work as expected

<div *ngIf="Users.length == 0" [swal]="showSwal">
      <swal #showSwal 
        title=" No Data  " 
        text="No data To Show" 
        showCloseButton="true" 
        type="warning">
      </swal>
</div>

Typically, SweetAlert is triggered by a button click, like in this simple example:

<swal
  #deleteSwal
  title="Delete {{ file.name }}?"
  text="This cannot be undone"
  type="question"
  [showCancelButton]="true"
  [focusCancel]="true"
  (confirm)="deleteFile(file)">
</swal>

<!-- Using [swal]: -->
<button [swal]="deleteSwal">Delete {{ file.name }}</button>

However, in my scenario, I wish to trigger the alert within a div.

Thank you

Answer №1

Based on the naming convention "Users", it seems like it could be an observable or @Input(). If it's an observable, you should include showSwal.fire() within its subscribe method. Alternatively, if it's an @Input(), you can implement it in the ngOnChanges() lifecycle hook.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Observable<Any> Filter

I am currently utilizing Typescript and Angular 4 in my work. Within my project, I have two lists implemented using rxjs/Rx. ... myList: Observable<MyClass[]>; filteredList: Observable<MyClass[]>; ... My objective is to filter the myList base ...

how to bind data to an array in Angular

I recently developed an Angular 7 application that features the capability to dynamically add and remove controls. However, I am facing challenges when it comes to binding the data to the form. In the code snippet below, I am focusing on the process of ad ...

What might be causing the component in Angular and TypeScript to have trouble reading the data returned by the service?

I've been working on this for hours without success. I created a web API get method that returns a simple array. public Hero[] getHeroes() { return new Hero[] { new Hero { Id = 1, Name = "Hunain Hafeez-1" }, ...

Unexpected behavior in resolving modules with Babel (using node and typescript)

Within my node project setup, I utilize babel-plugin-module-resolver for managing relative paths efficiently. tsconfig.json { "compilerOptions": { "outDir": "build", "target": "es5", ...

Importing SCSS files dynamically with TypeScript

Recently, I utilized Create React App (CRA) to create a new project and then included node-sass in order to import SCSS files. An example: import "./App.scss"; Although this method works without any issues, I encountered a problem when trying t ...

different ways to retrieve component properties without using inheritance

In order to modify certain properties of components after login, such as the "message" property of HomeComponent and the "age" property of UserComponent, I am unable to inherit the component class. What are some alternative methods to achieve this? Authen ...

Issues with running tests following upgrade to Karma 2.0.0

After updating Angular from v4.4 to v5.2 and Karma from v1.7.1 to v2.0.0, I encountered an issue where the command ng test no longer runs successfully. Interestingly, running the tests using karma start myconfigfile.js --single-run results in all tests pa ...

Encountering Error TS2411 when upgrading from Typescript version 1.0.0 to 1.1.0-1

After updating my TypeScript using npm install typescript -g, I have been encountering a recurring error during compilation. Although the compilation is successful, it's becoming tedious. cmd.exe /D /C C:/Users/Vado/AppData/Roaming/npm/tsc.cmd --sour ...

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

Protractor's compatibility with Headless Chrome is hindered on AWS CodeBuild, yet functions successfully when run locally

I am facing an issue with my webpage that requires Google Authentication before moving on to an angular web page. I have created some basic end-to-end tests which are working perfectly fine in Linux using Chrome Headless: The test finds the username fiel ...

Watching the Event Emitters emitted in Child Components?

How should we approach utilizing or observing parent @Output() event emitters in child components? For instance, in this demo, the child component utilizes the @Output onGreetingChange as shown below: <app-greeting [greeting]="onGreetingChange | a ...

Svelte language switcher experiencing technical difficulties

Currently delving into Svelte 3, I embarked on a project intended to be shared on GitHub in English. However, I realized that some of my friends do not speak English. To accommodate different language preferences, I decided to create a language switcher. H ...

What benefits does using Validators.compose() offer me?

I am in need of validating a field using multiple validators. If I opt for the Module Driven approach, my code will appear as follows: this.exampleForm = this.fb.group({ date_start : [ '', Validators.compose([ Validators.require ...

Utilizing event bubbling in Angular: a comprehensive guide

When using Jquery, a single event listener was added to the <ul> element in order to listen for events on the current li by utilizing event bubbling. <ul> <li>a</li> <li>b</li> <li>c</li> <li>d< ...

Angular 8 HTTP Interceptor causing issues with subscriptions

I'm currently in the process of setting up an Angular 8 project that will allow me to mock API calls using HTTP INTERCEPTORS. My approach involves adding a --configuration=mock flag to my ng serve script so that the interceptor is injected into my app ...

Is there a way to efficiently update the template within the *ngFor directive when working with an array of objects in Angular 2/

My Json Object is structured as follows: var obj = { "TimSays":"I can Walk", "RyanSays":"I can sing", "MaxSays":"I can dance", "SuperSays":"I can do it all" } To iterate through this object in the template, I am using a pipe helper due to ...

Implementing an overlay feature upon clicking a menu item - here's how!

I am currently working on implementing an overlay that displays when clicking on a menu item, such as item 1, item 2 or item 3. I have managed to create a button (Click me) that shows an overlay when clicked. Now, I would like to achieve the same effect wh ...

I'm looking to inject both default static values and dynamic values into React's useForm hook. But I'm running into a TypeScript type error

Below is the useForm code I am using: const { register, handleSubmit, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ defaultValues: { celebUid, //props fanUid, // props price, // props ...

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit ...

Issue with handling http errors and navigating routes in Angular 2

Whenever I check a user's token authentication and encounter a 401 error, I aim to redirect them to the login page. The issue arises when attempting to navigate to the login page within the error catch block. constructor(private http: Http , private ...