NG-ZORRO

// login.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzIconModule } from 'ng-zorro-antd/icon';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule, NzFormModule, NzInputModule, NzButtonModule, NzIconModule],
  template: `
    <form nz-form class="login-form" style="max-width: 400px; margin: 40px auto;">
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <nz-input-group nzPrefixIcon="user">
            <input nz-input [(ngModel)]="username" placeholder="اسم المستخدم" name="username" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <nz-input-group nzPrefixIcon="lock">
            <input nz-input type="password" [(ngModel)]="password" placeholder="كلمة المرور" name="password" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item>
        <button nz-button nzType="primary" nzBlock [disabled]="!username || !password" (click)="login()">
          تسجيل الدخول
        </button>
      </nz-form-item>
    </form>
  `
})
export class LoginComponent {
  username = '';
  password = '';
  
  constructor(private message: NzMessageService) {}
  
  login(): void {
    this.message.success(`مرحباً ${this.username}!`);
  }
}

// users-table.component.ts
import { Component } from '@angular/core';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzSpaceModule } from 'ng-zorro-antd/space';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [NzTableModule, NzTagModule, NzSpaceModule],
  template: `
    <nz-table
      #usersTable
      [nzData]="users"
      [nzPageSize]="10"
      [nzShowSizeChanger]="true"
      nzBordered
      nzShowPagination>
      <thead>
        <tr>
          <th nzWidth="80px">الرقم</th>
          <th>الاسم</th>
          <th>البريد</th>
          <th nzWidth="120px">الحالة</th>
          <th nzWidth="150px">إجراءات</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of usersTable.data">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <nz-tag [nzColor]="user.active ? 'green' : 'red'">
              {{ user.active ? 'نشط' : 'غير نشط' }}
            </nz-tag>
          </td>
          <td>
            <a>تعديل</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a class="text-danger">حذف</a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  `
})
export class UsersTableComponent {
  users = [
    { id: 1, name: 'أحمد محمد', email: 'ahmad@example.com', active: true },
    { id: 2, name: 'فاطمة علي', email: 'fatima@example.com', active: true },
    { id: 3, name: 'محمد حسن', email: 'mohamed@example.com', active: false },
  ];
}