Cacher is the code snippet organizer for pro developers

UI Block Busy

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

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

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

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>

Inline *ngIf Container/Template

<div class="col-6 mb-3">
  <h6>{{l("Carrier")}} :</h6>
  <ng-container *ngIf="
    item.controlNumber.status !== 1 && item.lookupName;
        then showCarrier;
        else notApplicable">
  </ng-container>
  <ng-template #showCarrier>
    <span>{{item.lookupName}}</span>
  </ng-template>
  <ng-template #notApplicable>
    <span>N/A</span>
  </ng-template>
</div>

CSS Bundle Mods

Make sure the extension file is defined as below as style.bundle.ext.css

angular\bundles.json

{
    "styles": [
    {
        "output": "src/assets/metronic/themes/default/css/style.bundle.min.css",
        "input": [
            "src/assets/metronic/themes/default/css/style.bundle.css",
            "src/assets/metronic/themes/default/css/style.bundle.ext.css"
        ]
    }
}

style.bundle.ext.css

.input-group  [class^="fa-"],
.input-group  [class*=" fa-"] {
    color: #ffffff;
}

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"