thisiszoaib

<p ellipsis [ngClass]="{ 'line-clamp': !showMore }">
  This product was not very satisfactory. I was disappointed with a lot of things. But the biggest was its shoddy packaging. I received damaged goods. Please beware of sellers on this site, not all of them are trusted!
</p>

thisiszoaib

<p ellipsis [ngClass]="{ 'line-clamp': !showMore }">
  This product was not very satisfactory. I was disappointed with a lot of things. But the biggest was its shoddy packaging. I received damaged goods. Please beware of sellers on this site, not all of them are trusted!
</p>

thisiszoaib

truncated(index: number) {
    this.showMoreButton = index === null;
}

thisiszoaib

<p 
  #ellipsisRef 
  ellipsis 
  (ellipsis-change)="truncated($event)"
  [ngClass]="{ 'line-clamp': !showMore }">
    This product was not very satisfactory. I was disappointed with a lot of things. But the biggest was its shoddy packaging. I received damaged goods. Please beware of sellers on this site, not all of them are trusted!
</p>
<span class="more" 
  *ngIf="!showMoreButton" 
  (click)="showComplete()">

thisiszoaib

@ViewChild(EllipsisDirective) ellipsisRef: EllipsisDirective;


showComplete() {
    if (this.ellipsisRef) {
      this.showMore = true;
      this.cd.detectChanges();
      this.ellipsisRef.applyEllipsis();
    }

thisiszoaib

@import "~@angular/material/theming";
@include mat-core();
$angular-primary: mat-palette($mat-teal, 500, 100, 900);
$angular-accent: mat-palette($mat-pink, A200, A100, A400);
$angular-warn: mat-palette($mat-red);
$angular-default-theme: mat-light-theme(
  (
    color: (
      primary: $angular-primary,
      accent: $angular-accent,

thisiszoaib

$angular-dark-theme: mat-dark-theme(
  (
    color: (
      primary: $angular-primary,
      accent: $angular-accent,
      warn: $angular-warn,
    ),
  )
);

thisiszoaib

$angular-dark-theme: mat-dark-theme(
  (
    color: (
      primary: $angular-primary,
      accent: $angular-accent,
      warn: $angular-warn,
    ),
  )
);

thisiszoaib

<mat-toolbar color="primary">
  Angular Dark Mode
  <div class="flex-stretch"></div>
  <mat-icon class="mr-8">brightness_5</mat-icon>
  <mat-slide-toggle [formControl]="toggleControl" class="mr-8">
  </mat-slide-toggle>
  <mat-icon>bedtime</mat-icon>
</mat-toolbar>

thisiszoaib

ngOnInit(): void {
  
    this.toggleControl.valueChanges.subscribe((darkMode) => {
      const darkClassName = 'darkMode';
      this.className = darkMode ? darkClassName : '';
    });
    
}