Cacher is the code snippet organizer for pro developers

Select

<select [attr.disabled]="isEnabled ? '' : null">
  <option></option>
</select>

UI Block Busy

Version 1

abp.ui.block(); //Block the whole page
abp.ui.block($('#MyDivElement')); //You can use any jQuery selection..
abp.ui.block('#MyDivElement'); //..or a direct selector
abp.ui.unblock(); //Unblock the page
abp.ui.unblock('#MyDivElement'); //Unblock specific element

// Loader
import { AppComponentBase } from '@shared/common/app-component-base';
this.spinnerService.show();
this.spinnerService.hide();

// uses FreezeUI (!!! OUTDATED !!!)
abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');
abp.ui.setBusy();
abp.ui.clearBusy();

abp.ui.setBusy(undefined, 'uploading');

Version 2

<div class="kt-portlet__body" [busyIf]="salesSummaryChart.loading">
<!-- ... -->
</div>

<button class="btn btn-secondary active" 
  (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Daily)">
  {{"Daily" | localize}}
</button>

abstract class DashboardChartBase {
    loading = true;
    showLoading() {
        setTimeout(() => { this.loading = true; });
    }
    hideLoading() {
        setTimeout(() => { this.loading = false; });
    }
}

class SalesSummaryChart extends DashboardChartBase {

  selectedDatePeriod: SalesSummaryDatePeriod = SalesSummaryDatePeriod.Daily;

  constructor(
    private _dashboardService: TenantDashboardServiceProxy) {
    super();
  }

  init(salesSummaryData, totalSales, revenue, expenses, growth) {
    this.hideLoading();
  }

  reload(datePeriod) {
    this.showLoading();
    this._dashboardService
      .getSalesSummary(datePeriod)
      .subscribe(result => {
        this.hideLoading();
      });
  }
}

getDashboardStatisticsData(datePeriod): void {
  this.salesSummaryChart.showLoading();
  this._dashboardService
    .getDashboardData(datePeriod)
    .subscribe(result => {
      this.salesSummaryChart.init(result.salesSummary, result.totalSales, result.revenue, 27, result.growth);
    });
}

ngAfterViewInit(): void {
  this.getDashboardStatisticsData(SalesSummaryDatePeriod.Daily);
}

Mutation Observer

domChange uses src\shared\utils\dom-change.directive.ts

private beforeMutationValue: any;

onDomChange(mutation: any): void {
  if (mutation && mutation.target) {
    const mutatedValue: string = mutation.target.value;
    if (mutatedValue !== '' && this.beforeMutationValue != mutatedValue) {
      this.beforeMutationValue = mutatedValue;
      console.log(mutatedValue);
      // this.getOrigins(mutatedValue);
    }
  }
}

<input class="form-control" (domChange)="onDomChange($event)" type="text" hidden>

get isFactoryLocationDisabled(): boolean {
    if (this.controlNumber.transportType) {
        let isRequestPickup = 
          this.controlNumber.transportType.toString() === ControlNumberTransportType.RequestPickUp.toString();
        let isPartner = abp.auth.isGranted('Pages.Partner');

        return (isRequestPickup && isPartner);
    }
    return false;
}

get isTrackingNumberDisabled(): boolean {
    return this.isFactoryLocationDisabled;
}

get isCarriersDisabled(): boolean {
    return this.isFactoryLocationDisabled;
}

[disabled]="isFactoryLocationDisabled"
<!-- or -->
[attr.disabled]="attr.disabled]"