How to Simply Popup by Using AngularJS

1. Installation of Dependencies in Angular
2. Installation of Bootstrap Using npm install bootstrap jquery popper.js in Angular
3. Installation of Angular Material on Our Project in Angular
4. Likely Error to Be Encountered While Creating a Popup in Angular

The beauty of enabling popup on a web page is an excellent avenue to display a short information about an item.

Popup is also an ideal way to give a prompt about action, in such a way that when a user clicks an item, it brings up a popup to indicate that the action is registered.

The Angular being a framework that serves numerous purposes, we will have to install some dependencies before getting the popup modal to work.

Installation of Dependencies in Angular

It is ideal to use Visual Studio Code to work on angular projects as it creates an environment where you can do everything in one place.

Installation of Bootstrap Using npm install bootstrap jquery popper.js in Angular

After creating a new angular project, we then head to the terminal and install Bootstrap using npm install bootstrap jquery popper.js.

After successful installation, we open the project folder on VS Code, head over to angular.json, under architect > build key, we make the following additions:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Installation of Angular Material on Our Project in Angular

The next is to install Angular Material on our project. Angular material lets add a new skin/theme that beautifies our webpage.

Still, inside the terminal’s project folder, we run the following command, ng add @angular/material, to install the angular material.

We will be given a list of skins to choose from. After selecting, we just chose Yes for the other options.

Now that the dependencies have been successfully installed, we will now go-ahead to do proper coding.

Alongside the components created when creating a project, we will need to make additional components.

We will do that by going to the terminal, in the project folder, and typing in ng g component popup into the terminal. After the installation, we should see additional components installed.

Moving forward, we head into app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';

@NgModule({
  declarations: [
    AppComponent,
    PopUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note that we made some additional imports above, imported the BrowserAnimationsModule, MatDialogModule, and the PopUpComponent, and added the BrowserAnimationsModule, MatDialogModule to the imports array.

Next we work on popup.component.html and we make few inputs:

<h2> Welcome {{firstName}} </h2>

<button class="btn btn-primary">
    Press
</button>

We move now to the app.component.ts, here we import the MatDialog and the PopUpComponent. Here, we also put in code that decides what data is displayed when clicking a button.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-mateiral';

  constructor(private dialogRef : MatDialog){}

  openDialog(){
    this.dialogRef.open(PopUpComponent,{
      data : {
        name : 'Samuel'
      }
    });
  }
}

The app.component.html also gets some minor codes added; we design the button that the popup message comes on when it is clicked.

<button class="btn btn-primary" (click)="openDialog()">
  Click to open pop up
</button>

Then we move on to the pop-up.component.ts and do some coding. What happens here is that we first import Inject and MAT_DIALOG_DATA into our component, and then we use these imports together to add a name to the popup message.

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {

  firstName;
  constructor(@Inject(MAT_DIALOG_DATA) public data) {
    this.firstName = data.name
  }

  ngOnInit(): void {
  }
}

We are all done, run the project, and compile it successfully.

Likely Error to Be Encountered While Creating a Popup in Angular

Just in case you run into this error, an argument of type any[] is not assignable to the parameter of type while trying to run the project.

All we need to do is head into tsconfig.json, add this snippet, *noImplicitAny*: true and change strict: true to strict: false.