demo-decoupled

2026-09-13 15:58:54 +02:00
parent 58274806e3
commit 1df41d4f91
109 changed files with 88561 additions and 0 deletions
@@ -0,0 +1,29 @@
+<h1 mat-dialog-title>Hi </h1>
+<div mat-dialog-content>
+  <p>User name</p>
+  <mat-form-field class="fillField">
+    <input matInput [(ngModel)]="data.username">
+  </mat-form-field>
+  <p>Password</p>
+  <mat-form-field class="fillField">
+    <mat-label>Enter your password</mat-label>
+    <input matInput
+           [type]="hide() ? 'password' : 'text'"
+           [(ngModel)]="data.password"
+    />
+    <button
+      mat-icon-button
+      matSuffix
+      (click)="clickEvent($event)"
+      [attr.aria-label]="'Hide password'"
+      [attr.aria-pressed]="hide()"
+    >
+      <mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
+    </button>
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close (click)="onNoClick()">No Thanks</button>
+  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
+</div>
@@ -0,0 +1,4 @@
+
+.fillField{
+  width: 100%;
+};
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,47 @@
+import {ChangeDetectionStrategy, Component, Inject, inject, signal} from '@angular/core';
+import {MatButtonModule} from "@angular/material/button";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+
+
+import {MatFormField, MatLabel, MatSuffix} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {FormsModule} from "@angular/forms";
+import {MatIcon} from "@angular/material/icon";
+import {DialogData} from "../../app.component";
+
+
+
+@Component({
+    selector: 'app-dialog',
+    imports: [MatButtonModule, MatLabel, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialogContent, MatFormField, MatInput, FormsModule, MatIcon,  MatSuffix],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './dialog.component.html',
+    styleUrl: './dialog.component.scss'
+})
+export class DialogComponent {
+  readonly dialogRef = inject(MatDialogRef<DialogComponent>);
+  hide = signal(true);
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data:DialogData) {}
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+
+
+  clickEvent(event: MouseEvent) {
+    this.hide.set(!this.hide());
+    event.stopPropagation();
+  }
+}
+
+
+