DEV Community: queencykoh

Understanding Content Projection

queencykoh — Wed, 13 Oct 2021 04:29:32 +0000

What is Content Projection?

Content projection helps us with a way to build reusable components. It provides us with the ability to insert or project the content we want to use inside another component.

There are three common implementations of content projection in Angular :

Single-slot content projection
Multi-slot content projection
Conditional content projection

In this article, we will go through each of the common implementations.

Let us start by creating a new Angular application.

Your first Angular app

queencykoh ・ Apr 18 ・ 1 min read

#angular

We are going to build an Authentication Form

I used TailwindCSS to rapidly build modern looking UI.

Setting up Tailwind CSS in Angular v11

queencykoh ・ Apr 18 ・ 1 min read

#angular #tailwindcss

We will not talk about TailwindCSS in this article. But if you like to have the same UI visit the GitHub repository👇🏼 and copy the styles in each CSS file.

queency-koh / content-projection

Next, create an Auth feature module

Creating a Feature Module

queencykoh ・ Apr 28 ・ 2 min read

#angular

Finally, create a Auth Form component using Angular CLI

ng g c auth/AuthForm

Modify auth-form.component.html and add the following lines of code.

<h2>Sign in to your account</h2>
<p>Dont have an account?
    <a routerLink="/auth/register">Sign up</a>
</p>

<div>
  <div>
    <div>
      <label for="email">Email address</label>
      <input id="email" name="email" type="email"/>
    </div>

    <div>
      <label for="password">Password</label>
      <input id="password" name="password" type="password"/>
    </div>

    <button type="submit">Sign in</button>
  </div>

<div>
  <div>
    <span>or</span>
  </div>

  <div>
    <div>
      <a href="#">
        <i class="lab la-facebook text-lg"></i>
      </a>
      <a href="#">
        <i class="lab la-google text-lg"></i>
      </a>
      <a href="#">
        <i class="lab la-github text-lg"></i>
      </a>
    </div>
  </div>
</div>

Let us now create a new login form component

ng g c auth/login

Modify login.component.html and add the following lines of code.

<app-auth-form></app-auth-form>

Run your Angular application using ng serve

Now that we have created our login form, we will now create a registration form. The registration form will also have email and password input and a submit button. But it will have a different header, a different link, and a different text for the submit button.

Let's create a new component name register

ng g c auth/register

Modify register.component.html and add the following lines of code.

<app-auth-form></app-auth-form>

Go back to your browser and navigate to auth/register. As expected, we will have the same UI as the login form. In the next section, we will use Single-slot content projection to customize each component.

Making Reusable Component using Single-slot content projection

Single-slot content projection is the most basic form of content projection. With this, a component accepts content from a single source using <ng-content></ng-content>

On your register.component.html. Insert <h2>Register your account</h2> in the

<app-auth-form>
  <h2>Register your account</h2>
</app-auth-form>

To project the content we need to replace <h2 class="auth-header">Sign in to your account</h2> in the auth-form.component.html with <ng-content></ng-content>.

<ng-content></ng-content>

<p>Don't have an account?
    <a routerLink="/auth/register">Sign up</a>
</p>

<!-- Code below omitted for clarity -->

This will break the login.component.html so go ahead and insert <h2>Sign in to your account</h2> in the in your login.component.html file.

<app-auth-form>
  <h2>Sign in to your account</h2>
</app-auth-form>

Go back to your browser and navigate to auth/register.

The header was changed successfully. However, we also have to change the link and button text.

<app-auth-form>
  <h2>Register your account</h2>
  <p>
    <a routerLink="/auth/login"> Already have an account?</a>
  </p>
  <button type="submit">Sign Up</button>
</app-auth-form>

Modify auth-form.component.html

<ng-content></ng-content>
<ng-content></ng-content>

<div class="auth-form-container">
  <div class="auth-form">
    <div>
      <label for="email">Email address</label>
      <input id="email" name="email" type="email" />
    </div>

    <div>
      <label for="password">Password</label>
      <input id="password" name="password" type="password" />
    </div>
    <ng-content></ng-content>
  </div>
  <!-- Code below omitted for clarity -->
</div>

However, adding multiple <ng-content></ng-content> will only project content from a single source.

In the next section, we will look into Multi-slot content projection to help us project content from multiple sources.

Multi-slot content projection to the rescue

With the multi-slot content projection pattern, a component accepts content from multiple sources. To determine which content goes into which slot, we can use the select attribute of <ng-content></ng-content>.

Go back to the auth-form template and on the <ng-content><ng-content> add the select attribute and specify a CSS selector for each slot where you want the content to be projected.

Angular supports selectors like tag name, attribute, CSS class, and the :not pseudo-class. In this example we are going to use only the tag name.

<ng-content select="h2"></ng-content>
<ng-content select="p"></ng-content>

<div class="auth-form-container">
  <div class="auth-form">
    <div>
      <label for="email">Email address</label>
      <input id="email" name="email" type="email" />
    </div>

    <div>
      <label for="password">Password</label>
      <input id="password" name="password" type="password" />
    </div>
    <ng-content select="button"></ng-content>
  </div>
  <!-- Code below omitted for clarity -->
</div>

Go back to your browser and as you will see the projected contents now appear on the specified location.

Reuse HTML blocks with conditional content projection

Conditional Content Projection is great when creating reusable HTML blocks. It renders the content when specific conditions are met. There are advanced cases for Conditional content projection but we will only discuss its most basic form.

Create a new Social Login component

ng new g c auth/SocialLogin

Using <ng-template> to hold template content that will be used by ngTemplateOutlet Structural directives.

Modify social-login.component.html

<ng-template #socialLogin></ng-template>

Using ngTemplateOutlet to instantiate the template using its template reference, #socialLogin

<ng-container *ngTemplateOutlet="socialLogin"></ng-container>

Using context object we can associate ngTemplateOutlet variables with elements that can be accessed from within the template using let.

<ng-template #socialLogin let-icon="icon">
    {{ icon }}
</ng-template>

<ng-container *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-facebook-f'}"></ng-container>

We can also instantiate the template multiple times

    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-facebook-f' }"
    ></ng-container>
    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-google' }"
    ></ng-container>
    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-github' }"
    ></ng-container>

The final code should look like this :

  <div class="social-login-grid">
    <ng-template #socialLogin let-icon="icon">
      <a href="#">
        <i class="{{ icon }} text-lg"></i>
      </a>
    </ng-template>

    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-facebook-f' }"
    ></ng-container>
    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-google' }"
    ></ng-container>
    <ng-container
      *ngTemplateOutlet="socialLogin; context: { icon: 'lab la-github' }"
    ></ng-container>
  </div>

Go back to your browser and see the final result

Lazy Load a Feature Module

queencykoh — Fri, 09 Jul 2021 12:14:52 +0000

By default, feature modules are eagerly loaded, this means that modules and all its components will load at the initial render of the application.

See my previous post to know more about module and how to create a feature module in Angular.

Creating a Feature Module

queencykoh ・ Apr 28 ・ 2 min read

#angular

Setup App Routing Module

To lazy load a feature module, go to app-routing.module.ts

If you do not have the App Routing Module just yet, you can generate it by using the command ng generate module app-routing with --flat to put the file in src/app instead of its own folder and --module=app to tell the CLI to register it in the imports array of the AppModule.

In your app-routing.module.ts, add a routes constant to define your routes, each Route object should have a path property which defines the URL path of your module and loadChildren to import your module dynamically and then pass the routes as an argument in the RouterModule.forRoot() in your imports array.

import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: 'transactions',
    loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule)
  }
];


imports: [RouterModule.forRoot(routes)],

Open app.component.html and replace the contents with <router-outlet></router-outlet> which works as a placeholder to load components dynamically.

Setup the Feature Module Routes

Generate a new component in the Transactions Module

ng generate component transactions/TransactionsComponent

Go to transactions.module.ts and add a routes constant to define your routes, the Route object should have a path and component properties which is the name of your component, and optionally you can add child routes which you can define in the children properties. In your imports array, instead of forRoot, you will have to use the forChild and pass routes as the argument.

const routes: Routes = [
{
    path: '',
    component: TransactionsComponent,
    children : [
      {
        path: '',
        component: TransactionListComponent,
      }
    ]
  }
];


imports: [RouterModule.forChild(routes)]

Improve Code by Using async await

Add await before import(...) then enclose it with a parenthesis and reference .TransactionsModule directly and lastly mark the function with async

const routes: Routes = [
  {
    path: 'transactions',
    loadChildren: async () => (await import('./transactions/transactions.module')).TransactionsModule
  }
];

Setting up fake REST API with JSON Server in Angular

queencykoh — Wed, 26 May 2021 05:51:41 +0000

What is JSON Server?

JSON Server was created for front-end developers who need a quick back-end for prototyping and mocking. It allows developers to get a full fake REST API using their own data with no coding required.

Install JSON Server

Open your terminal and run



npm i json-server

You may also install it globally by adding the -g attribute



npm install -g json-server

Create JSON database

In the root of your application, create db.json file with some data



{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ]
}

Configure JSON server

Open package.json file and add the following line of code in the scripts object:



"scripts" : {
    ...
    "mock:server": "json-server --watch db.json"
}

If you have installed json-server globally you may simply run json-server --watch db.json in your terminal.

Run JSON server



npm run mock:server

Open http://localhost:3000/posts/1 in your browser to get the following data

Creating a Feature Module

queencykoh — Wed, 28 Apr 2021 05:32:56 +0000

What is a Feature Module?

A feature modules help us organize our code. It helps us to break down our application into specific use cases. As the application grows we don't want everything to live in the root module, the app.module.ts file.

Create a Feature Module

Open terminal and go to the Angular project directory and run

ng generate module Transactions

Angular CLI will create a folder called transactions with transactions.module.ts file inside

Open transactions.module.ts to see its contents

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class TransactionsModule { }

The content structure is the same as the the app.module.ts but notice that the feature module imports the CommonModule instead of the BrowserModule. CommonModule contains common directives such as ngIf and ngFor while BrowserModule configures the Angular app for the browser which is needed to be done only once in the app.module.ts.

Import Feature Module

The root module must know about the feature module, to do this, we must import the feature module in the root module.

Open app.module.ts file
Add the following line of code import { TransactionsModule } from './transactions/transactions.module';
Add TransactionsModule in the imports array

app.module.ts should look like the following

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { TransactionsModule } from './transactions/transactions.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TransactionsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a Component in the Feature Module

Open terminal and run

ng generate component transactions/TransactionList

This will create a new transaction-list folder for the new component within the transactions folder and will update the transactions.module.ts file to add TransactionListComponent in the declarations array.

Export a feature module’s component

To render the Transaction List component in the App component, we have to export the TransactionListComponent in the TransactionsModule.

Open transactions.module.ts file
After the imports array, add the following code

exports: [
    TransactionListComponent
  ]

transaction.module.ts should look like the following :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TransactionListComponent} from './transactions/transaction-list.component';



@NgModule({
  declarations: [
    TransactionListComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    TransactionListComponent
  ]
})
export class TransactionsModule { }

Render a feature module’s component template

Open app.component.html
Add the tag <app-transaction-list></app-transaction-list>
In the terminal, run ng serve
Launch browser and you should see transaction-list works!

Lazy Load a Feature Module

queencykoh ・ Jul 9 ・ 2 min read

Setting up Line Awesome in Angular

queencykoh — Tue, 27 Apr 2021 09:51:44 +0000

Line Awesome is a great alternative for Font Awesome for modern line icons.

Install Line Awesome

Open terminal and go to the Angular project directory and run

npm install line-awesome

Add Line Awesome reference

Open angular.json file
Add Line Awesome directory in the styles

"node_modules/line-awesome/dist/line-awesome/css/line-awesome.min.css"

Try it out!

Add the following to any components

<i class="las la-bell"></i>

Setting up Tailwind CSS in Angular v11

queencykoh — Sun, 18 Apr 2021 04:09:41 +0000

Note: In the v12 release, Angular added support for Tailwind CSS. See tailwind official documentation on how to install Tailwind CSS in Angular v12

Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS

Install Tailwind CSS

Open terminal and go to the Angular project directory and run

npm install tailwindcss

Optionally, install Tailwind CSS plugins

npm install @tailwindcss/typography
npm install @tailwindcss/forms

Configure Tailwind CSS

In the Angular project directory, create a Tailwind CSS configuration file name tailwind.config.js
Add the following configurations

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

Add configuration for forms and typography plugins if the following Tailwind CSS plugins are installed

plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],

Open styles.scss file to import the 3 Tailwind CSS layers

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Try it out

Add the following to any components

<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>

Run ng serve and open browser on http://localhost:4200/

Using a utiliy-first frameworks like TailwindCSS can make your HTML files bloated to deal with this duplication and to keep your project maintainable, visit Extracting Components at Tailwind CSS

To see how I created a Authentication form using TailwindCSS visit link below

queency-koh / content-projection

Your first Angular app

queencykoh — Sun, 18 Apr 2021 02:23:02 +0000

Install the Angular CLI

Angular CLI is use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Create an initial starter application

Run the CLI command ng new and provide the name of the project and --routing attribute to create application routing module, called AppRoutingModule for common routing tasks.

ng new budgetarian-app --routing

Run the application

Go to the folder and run ng serve

cd budgetarian-app
ng serve

ng serve command will build the app and starts the development server

Open browser on http://localhost:4200/