Einfaches Popup mit AngularJS

1. Installation von Abhängigkeiten in Angular
2. Installation von Bootstrap Mit npm install bootstrap jquery popper.js in Angular
3. Installation von Angular Material auf unserem Projekt in Angular
4. Wahrscheinlicher Fehler beim Erstellen eines Popups in Angular

Das Schöne daran, Popups auf einer Webseite zu aktivieren, ist eine hervorragende Möglichkeit, kurze Informationen zu einem Element anzuzeigen.

Popup ist auch ein idealer Weg, um eine Aufforderung zu einer Aktion zu geben, so dass, wenn ein Benutzer auf ein Element klickt, ein Popup erscheint, um anzuzeigen, dass die Aktion registriert ist.

Da Angular ein Framework ist, das zahlreichen Zwecken dient, müssen wir einige Abhängigkeiten installieren, bevor das Popup-Modal funktioniert.

Installation von Abhängigkeiten in Angular

Es ist ideal, Visual Studio Code zu verwenden, um an Angularprojekten zu arbeiten, da es eine Umgebung schafft, in der Sie alles an einem Ort erledigen können.

Installation von Bootstrap Mit npm install bootstrap jquery popper.js in Angular

Nachdem wir ein neues Angularprojekt erstellt haben, gehen wir zum Terminal und installieren Bootstrap mit npm install bootstrap jquery popper.js.

Nach erfolgreicher Installation öffnen wir den Projektordner auf VS Code, gehen zu angular.json, unter architect > build key nehmen wir folgende Ergänzungen vor:

"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 von Angular Material auf unserem Projekt in Angular

Als nächstes installieren wir Angular Material in unserem Projekt. Angularmaterial ermöglicht das Hinzufügen eines neuen Skins/Themas, das unsere Webseite verschönert.

Dennoch führen wir im Projektordner des Terminals den folgenden Befehl aus: ng add @angular/material, um das Angularmaterial zu installieren.

Wir erhalten eine Liste von Skins zur Auswahl. Nach der Auswahl haben wir bei den anderen Optionen einfach Ja gewählt.

Nachdem die Abhängigkeiten erfolgreich installiert wurden, werden wir nun mit der ordnungsgemäßen Codierung fortfahren.

Neben den beim Erstellen eines Projekts erstellten Komponenten müssen wir zusätzliche Komponenten erstellen.

Wir werden das tun, indem wir zum Terminal im Projektordner gehen und ng g component popup in das Terminal eingeben. Nach der Installation sollten wir zusätzliche Komponenten installiert sehen.

Weiter geht es mit 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 { }

Beachten Sie, dass wir oben einige zusätzliche Importe vorgenommen, das BrowserAnimationsModule, MatDialogModule und die PopUpComponent importiert und das BrowserAnimationsModule, MatDialogModule zum Import-Array hinzugefügt haben.

Als nächstes arbeiten wir an popup.component.html und machen einige Eingaben:

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

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

Wir wechseln nun zur app.component.ts, hier importieren wir den MatDialog und die PopUpComponent. Hier fügen wir auch Code ein, der entscheidet, welche Daten beim Klicken auf eine Schaltfläche angezeigt werden.

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'
      }
    });
  }
}

Die app.component.html bekommt auch einige kleinere Codes hinzugefügt; Wir entwerfen die Schaltfläche, auf der die Popup-Nachricht angezeigt wird, wenn darauf geklickt wird.

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

Dann gehen wir weiter zu pop-up.component.ts und programmieren etwas. Was hier passiert, ist, dass wir zuerst Inject und MAT_DIALOG_DATA in unsere Komponente importieren und dann diese Importe zusammen verwenden, um der Popup-Nachricht einen Namen hinzuzufügen.

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 {
  }
}

Wir sind alle fertig, führen das Projekt aus und kompilieren es erfolgreich.

Wahrscheinlicher Fehler beim Erstellen eines Popups in Angular

Nur für den Fall, dass Sie auf diesen Fehler stoßen, ein Argument vom Typ any[] kann dem Parameter vom Typ nicht zugewiesen werden, während Sie versuchen, das Projekt auszuführen.

Alles, was wir tun müssen, ist in tsconfig.json zu gehen, dieses Snippet hinzuzufügen, *noImplicitAny*: true und strict: true in strict: false zu ändern.