thisiszoaib

<div class="content">
  <div class="flex-row">
    <mat-form-field class="mr">
      <mat-label>Select country</mat-label>
      <mat-select [formControl]="countryControl">
        <mat-option *ngFor="let country of countries" [value]="country">
          {{country.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

thisiszoaib

this.cities$ = this.countryControl.valueChanges.pipe(
      map(country => country.cities)
);

thisiszoaib

<mat-form-field>
      <mat-label>Select city</mat-label>
      <mat-select [formControl]="cityControl">
        <mat-option *ngFor="let city of cities$ | async" [value]="city">
          {{city}}
        </mat-option>
      </mat-select>
</mat-form-field>

thisiszoaib

@Component({
  selector: "app-weather-report",
  templateUrl: "./weather-report.component.html",
  styleUrls: ["./weather-report.component.scss"]
})
export class WeatherReportComponent implements OnInit {
  data$: Observable<any>;
  constructor(
    private weatherService: WeatherService,
    private route: ActivatedRoute

thisiszoaib

<div fxLayout="row" class="card-back" fxLayoutGap="16px">
  <div fxFlex="80px">
   <img src="https://firebasestorage.googleapis.com/v0/b/web-tuts-611b3.appspot.com/o/profile.jpg?alt=media&token=12d87a30-0b38-4bff-abc8-cad745e4dd05">
  </div>
  <div class="review-text">
  	<h4>Brian</h4>
  	<p class="line-clamp">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>
  </div>

thisiszoaib

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;  
}

thisiszoaib

<span class="more" 
  *ngIf="!showMore" 
  (click)="showMore = true">
  Show more
</span>

thisiszoaib

<p [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

@NgModule({
  imports:      [ BrowserModule, EllipsisModule, BrowserAnimationsModule, FormsModule, MatToolbarModule, FlexLayoutModule ],
  declarations: [ AppComponent, ReviewCssComponent, ReviewJsComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

thisiszoaib

@NgModule({
  imports:      [ BrowserModule, EllipsisModule, BrowserAnimationsModule, FormsModule, MatToolbarModule, FlexLayoutModule ],
  declarations: [ AppComponent, ReviewCssComponent, ReviewJsComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }