AngularJS を使用したシンプルなポップアップ
- Angular での依存関係のインストール
-
Angular で
npm install bootstrap jquery popper.jsを使用した Bootstrap のインストール - Angular でのプロジェクトへの Angular マテリアルのインストール
- Angular でポップアップを作成しているときに発生する可能性のあるエラー
Web ページでポップアップを有効にすることの美しさは、アイテムに関する短い情報を表示するための優れた手段です。
ポップアップは、ユーザーがアイテムをクリックすると、アクションが登録されていることを示すポップアップを表示するように、アクションに関するプロンプトを表示するための理想的な方法でもあります。
Angular は多くの目的に役立つフレームワークであるため、ポップアップモーダルを機能させる前に、いくつかの依存関係をインストールする必要があります。
Angular での依存関係のインストール
Visual Studio Code を使用して、すべてを 1 か所で実行できる環境を作成するため、Angular プロジェクトで作業するのが理想的です。
Angular で npm install bootstrap jquery popper.js を使用した Bootstrap のインストール
新しい Angular プロジェクトを作成したら、ターミナルに移動し、npm install bootstrap jquery popper.js を使用して Bootstrap をインストールします。
インストールが正常に完了したら、VS Code でプロジェクトフォルダーを開き、angular.json に移動します。architect>ビルドキーの下で、次の追加を行います。
"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"
]
Angular でのプロジェクトへの Angular マテリアルのインストール
次は、プロジェクトに AngularMaterial をインストールします。Angular マテリアルを使用すると、Web ページを美しくする新しいスキン/テーマを追加できます。
それでも、ターミナルのプロジェクトフォルダー内で、次のコマンド ng add @ angle / Material を実行して、Angular マテリアルをインストールします。
選択できるスキンのリストが表示されます。選択した後、他のオプションとしてはいを選択しました。
依存関係が正常にインストールされたので、次に適切なコーディングを行います。
プロジェクトの作成時に作成されたコンポーネントに加えて、追加のコンポーネントを作成する必要があります。
これを行うには、ターミナルのプロジェクトフォルダーに移動し、ターミナルに ng g component popup と入力します。インストール後、追加のコンポーネントがインストールされていることを確認する必要があります。
次に、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 { }
上記でいくつかの追加のインポートを行い、BrowserAnimationsModule、MatDialogModule、および PopUpComponent をインポートし、BrowserAnimationsModule、MatDialogModule をインポート配列に追加したことに注意してください。
次に、popup.component.html に取り組み、いくつかの入力を行います。
<h2> Welcome {{firstName}} </h2>
<button class="btn btn-primary">
Press
</button>
次に、app.component.ts に移動します。ここで、MatDialog と PopUpComponent をインポートします。ここでは、ボタンをクリックしたときに表示されるデータを決定するコードも入力します。
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'
}
});
}
}
app.component.html にもいくつかのマイナーコードが追加されています。クリックしたときにポップアップメッセージが表示されるボタンを設計します。
<button class="btn btn-primary" (click)="openDialog()">
Click to open pop up
</button>
次に、pop-up.component.ts に移動し、コーディングを行います。ここで何が起こるかというと、最初に Inject と MAT_DIALOG_DATA をコンポーネントにインポートし、次にこれらのインポートを一緒に使用してポップアップメッセージに名前を追加します。
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 {
}
}
これですべて完了し、プロジェクトを実行して、正常にコンパイルします。
Angular でポップアップを作成しているときに発生する可能性のあるエラー
このエラーが発生した場合に備えて、プロジェクトを実行しようとしているときに、タイプ any[] の引数をタイプのパラメーターに割り当てることはできません。
tsconfig.json に移動し、このスニペット*noImplicitAny*: true を追加して、strict: true を strict: false に変更するだけです。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn