DEV Community: sabrymuhamad

Customizable and re-usable embedded views using NgTemplateOutlet in Angular (Declarative way)

sabrymuhamad — Fri, 12 Jul 2024 12:12:02 +0000

There are different ways to customize the view of angular component, one of the most famous ways is using content projection "ng-content"
but actually I find "ng-content" won't be very flexible for the upcoming example and I really doubt if it would work at all.

Before we jump into a real life example I want to emphasis that we could use the "imperative" way to solve this example as well but I'm afraid that it would be more complicated
than using NgTemplateOutlet directive "declarative"...

and now to our first example:

Using Angular material stepper I need to make a customizable stepper header in some cases so I want to conditionally show and hide the default header and this an easy part using some CSS so I created a class called hide-stepper-header

        .hide-stepper-header {
            .mat-horizontal-stepper-header-container {
                display: none;
            }
        }

<div class="tw-mt-10 tw-w-1/2 tw-mx-auto" [ngClass]="{'hide-stepper-header': stepperHeader()}">
            <div class="tw-flex tw-mb-4" *ngIf="stepperHeader()">
                <ng-container [ngTemplateOutlet]="stepperHeader()!"></ng-container>
            </div>

            <mat-stepper #stepper [(selectedIndex)]="selectedIndex">
                <mat-step>
                    <ng-template matStepLabel>Fill out your name</ng-template>
                    <p>Step 1 body</p>
                    <div>
                        <button mat-button matStepperNext>Next</button>
                    </div>
                </mat-step>

                <mat-step>
                    <ng-template matStepLabel>Done</ng-template>
                    <p>You are now done.</p>
                    <div>
                        <button mat-button matStepperPrevious>Back</button>
                        <button mat-button (click)="stepper.reset()">Reset</button>
                    </div>
                </mat-step>
            </mat-stepper>
        </div>

        stepperHeader = input<TemplateRef<any>>();
        selectedIndex = model(0);

this class would be triggered dynamically depends on if there is a custom header provided to the stepper or not.

in the above code snippet I created a stepper component which takes a model signal that works like an Input and Output to listen to the active step changes.
and this is the parent component re-using the stepper component in customizable view

    export class EmbeddedViewsComponent {
        steps = [
            {stepTitle:'Step title 1', isActive:false},
            {stepTitle:'Step title 2', isActive:true}
        ];
        activeIndex = 0;
    }

<app-stepper [stepperHeader]="stepperHeaderRef" [(selectedIndex)]="activeIndex"></app-stepper>

    <ng-template #stepperHeaderRef>
        <ng-container *ngFor="let step of steps;let i = index;let last = last">
            <div class="step"
                [ngClass]="{'active':activeIndex === i, 'completed':activeIndex > i, 'pending':activeIndex < i}">
                <div class="bullet">
                    <mat-icon *ngIf="activeIndex > i">check</mat-icon>
                    <div [ngClass]="{'active':activeIndex === i}"></div>
                </div>
                <div class="number"><span class="tw-uppercase">{{step.stepTitle}}</span></div>
                <div class="tw-w-max" [ngClass]="{'active':activeIndex === i}">
                    {{activeIndex === i ? 'In Progress' :
                    activeIndex < i ? 'Pending' : 'Completed' }} </div>
                </div>
                <div *ngIf="!last" class="step-link"></div>
        </ng-container>
    </ng-template>

.step-link {
        @apply tw-h-[1px] tw-bg-neutral-300 tw-w-full tw-mt-4;
    }

    .step {
        .bullet {
            @apply tw-mb-4 tw-flex tw-items-center tw-justify-center tw-bg-green-100 tw-w-[32px] tw-h-[32px] tw-rounded-full;

            mat-icon {
                @apply tw-text-white;
            }

            .active {
                @apply tw-bg-green-400 tw-w-[12px] tw-h-[12px] tw-rounded-full;
            }
        }

        .number {
            @apply tw-text-neutral-600 tw-tracking-widest tw-w-32;
        }

        &>.active {
            @apply tw-text-green-500;
        }

        &.pending {
            @apply tw-opacity-60;
        }

        &.completed {
            .bullet {
                @apply tw-bg-green-600;
            }
        }
    }

here in the parent component I provide number of steps for the header to show and actually I could also provide the steps content to show in our re-usable component

You could also check the src code in my github repo.

Reusable blocks using Sass @mixin with angular example

sabrymuhamad — Mon, 18 Mar 2024 18:44:11 +0000

One of the biggest features of CSS Preprocessors like Sass is the resuable blocks in another meaning "@mixin"...
The very common use for using "mixins" is to store some css properties to be later included "@include" into another class and this is very useful already but one of rare usage of mixin is to act like a function which takes some arguments and act accordingly.

of course Sass has @function decorator as well but it is different than @mixin since function in sass should return a value and it is commonly used to do operations not to create css code.

so lets jump straight into an example of "@mixin"

use case:

For this example I'm using Angular with scss.However, this is still valid with any other framework or pure html/sass.

Imagine you have multiple status in your app and according to each status returned from http request, you need to change the color of text or background of certain UI block.

<div [ngClass]="status">Current Status<div>

We have 3 different status returned from the backend: active/freezed/cancelled

so with every status returned I want to apply this css code

.active {
  border: 5px solid green;
  box-shadow: 0 0 35px green;
}

.freezed {
  border: 5px solid blue;
  box-shadow: 0 0 35px blue;
}

.cancelled {
  border: 5px solid red;
  box-shadow: 0 0 35px red;
}

this might seem fine to you since it is not a lot of code but imagin that use need to add some kind of animation like so
animation: fadeInOut 2s infinite;
so the code should look like somthing similar

.active{
  border: 5px solid blue;
  box-shadow: 0 0 35px green;
  animation: fadeInOut-green2s infinite;
}
  @keyframes fadeInOut-green{

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px green, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}
.freezed{
  border: 5px solid blue;
  box-shadow: 0 0 35px blue;
  animation: fadeInOut-blue 2s infinite;
}
  @keyframes fadeInOut-blue {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px blue, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}
.cancelled{
  border: 5px solid red;
  box-shadow: 0 0 35px red;
  animation: fadeInOut-red 2s infinite;
}
  @keyframes fadeInOut-red {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px red, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}

so these keyframes are changing the shadow of the element according to its color and in our case we will have to create 3 keyframes for the 3 statuses... suddenly you would feel there is something wrong if you didn't feel it already earlier.

here comes the power of Sass and mixin...

@mixin _fadeAnimation($ColorVar) {
  border: 5px solid $ColorVar;
  box-shadow: 0 0 35px $ColorVar;
  animation: fadeInOut-#{$ColorVar} 2s infinite;

  @keyframes fadeInOut-#{$ColorVar} {

    0%,
    100% {
      box-shadow: 1px 0px 30px 4px $ColorVar, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    }

    50% {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    }
  }
}

.active {
  @include _fadeAnimation(green);
}

.freezed {
  @include _fadeAnimation(blue);
}

.cancelled{
  @include _fadeAnimation(red);
}

I think that last piece of code is a please to see for most of developers since it is very close to what we use on daily basis on any programming language... mixin here is the function that takes some arguments and we excute that function using @include with function name with the desired parameters.