DEV Community: Emeka Elo-Chukwuma

How to create an Angular library or package and publish on npm

Emeka Elo-Chukwuma — Tue, 19 Jul 2022 08:28:07 +0000

What are libraries?

Libraries which are also known as packages are reusable codes that speed up development processes or add functionalities to our applications. They save time, energy and resources for developers.

When building an Angular application, you may find yourself rewriting functionalities you implemented across your app or projects. That can seem counter productive and a solution to that is to refactor that functionality or feature into a library which would make it more reusable, maintainable and accessible. This article shows how to create libraries or packages for the angular ecosystem. Let's begin!

Requirements

Angular framework (version 14)
Node version ^14.15.5 || ^16.10.0

If you want to use a different angular version, you can check this angular and node version compatibility table made by @layzee

Just keep in mind that libraries built with higher versions of angular are not compatible with applications built with angular versions lower than that of the library.

Setting up the library

We will be using the Angular CLI to set up a workspace where we will build the library and an angular application where we can check out the functionalities we built for the library. Let's name the workspace library-app and create it with the following command:

ng new library-app

When it's done, you can serve your application to see it running.

Enter the root directory of your new workspace and generate the library with the following command:

cd library-app
ng generate library ngx-stuff

Here, the name of our library is ngx-stuff. This is going to be a library that just does stuff 🤯.

The ngx prefix is a convention to denote that the library can be used with Angular.

After the command, a projects/ngx-stuff folder with the structure below is created in the root directory.

projects
└── ngx-stuff
    ├── src
    │   ├── lib
    │   │   ├── ngx-stuff.component.spec.ts
    │   │   ├── ngx-stuff.component.ts
    │   │   ├── ngx-stuff.module.ts
    │   │   ├── ngx-stuff.service.spec.ts
    │   │   └── ngx-stuff.service.ts
    │   ├── public-api.ts
    │   └── test.ts
    ├── .browserslistrc
    ├── tsconfig.json
    ├── karma.conf.js
    ├── ng-package.json
    ├── package.json
    ├── README.md
    ├── tsconfig.lib.json
    ├── tsconfig.lib.prod.json
    └── tsconfig.spec.json

The lib folder contains the files where the library features are built.

The public-api.ts exposes the functions and utilities to be imported by other applications.

The package.json records important metadata about the library and is required before publishing to NPM. It also defines functional attributes of the library that npm uses to install dependencies and identify the entry point to our package.

An ng-packagr library is installed in the workspace and can be seen in the package.json of our application.

The build output path for the library is added to the tsconfig.json.

The angular.json file is modified by adding configuration for the generated library which basically maps the file paths in the library folder to properties in the json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "library-app": {
      "projectType": "application",
      ...
    },
    "ngx-stuff": {
      "projectType": "library",
      "root": "projects/ngx-stuff",
      "sourceRoot": "projects/ngx-stuff/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/ngx-stuff/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/ngx-stuff/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/ngx-stuff/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/ngx-stuff/src/test.ts",
            "tsConfig": "projects/ngx-stuff/tsconfig.spec.json",
            "karmaConfig": "projects/ngx-stuff/karma.conf.js"
          }
        }
      }
    }
  }
}

Notice the different projectType for the ngx-stuff library and the library-app application

Building features in the library

The type of functionality we want to build into a library is determined by the kind of library it is. There are component or ui libraries as well as utility libraries. Your library can also be both if you want.

Utility feature

To build utility functions for our library, we create reusable functions in the ngx-stuff.service.ts file.
Let's create two functions called doStuff that returns the string stuff library and doStuffWithInput that returns the string we pass to the function as an argument.

// ngx-stuff.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class NgxStuffService {
  constructor() {}

  doStuff(): string {
    return 'stuff library';
  }

  doStuffWithInput(input: string): string {
    return input;
  }
}

Now, we can instantly use these functions from the library in our application by injecting the library service as a dependency using the Angular 14 inject() method

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { NgxStuffService } from 'projects/ngx-stuff/src/public-api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'library-app';
  stuff = inject(NgxStuffService);

  ngOnInit() {
    console.log(this.stuff.doStuff());
    console.log(this.stuff.doStuffWithInput('stuff library with input'));
  }
}

When we run our application, we can see the values we logged out in the browser console.

Component feature

To add a component feature to the library, we build the user-interface in the ngx-stuff.component.ts file. We will create a reusable button that can be customized.

// ngx-stuff.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-stuff',
  template: `
    <button class="custom" [ngClass]="customClass" [ngStyle]="customStyle">
      {{ name }}
    </button>
  `,
  styles: ['button {color: blue;} .custom{background-color: yellow}'],
})
export class NgxStuffComponent implements OnInit {
  @Input() name = 'button stuff';
  @Input() customClass: string = '';
  @Input() customStyle = {};

  constructor() {}

  ngOnInit(): void {}
}

The field properties in the component class are bound to the attributes in the button. These properties have the Input() decorator which allows the library to receive values from parent components(components where the library is imported).

To use the ngClass and ngStyle attributes, the commonModule package needs to be imported in the library's module.

// ngx-stuff.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgxStuffComponent } from './ngx-stuff.component';

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

For this library component to be used in our application, we need to import the library's module in the application's NgModule.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxStuffModule } from 'projects/ngx-stuff/src/public-api';

import { AppComponent } from './app.component';

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

Then we use it in our template with the ngx-stuff selector

<!-- app.component.html -->

<ngx-stuff></ngx-stuff>
<ngx-stuff name="new button"></ngx-stuff>
<ngx-stuff name="custom class" customClass="custom-class"></ngx-stuff>
<ngx-stuff customClass="new-class more-class"></ngx-stuff>
<ngx-stuff name="custom style" [customStyle]="{backgroundColor:'white'}"></ngx-stuff>

The style.css file contains styles for the custom button

/** style.css **/
.custom-class {
    border: 0;
}

.more-class {
    border: 3px solid palevioletred;
}

Results

Building the library

Notice that the import path for the library looks a bit different, that's because we are importing the library locally relative to where we want to use it in our application. However, in our tsconfig.json, the path has already been configured for the build path to map to a shorter string which is easier to understand.

// tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "ngx-stuff": [
        "dist/ngx-stuff"
      ]
    },
    ...
  },
  ...
}

So we'll build our library with the following command;

ng build ngx-stuff

Then we change the import path in our application to ngx-stuff

// app.component.ts

import { NgxStuffService } from 'ngx-stuff';
...

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxStuffModule } from 'ngx-stuff';
...

So now, when we make any change to the library, we need to build it first before checking it out.

Publishing to NPM

To publish a library or package to npm, a user account on npm platform is needed. You can sign up here if you do not have an account.

Now we need to log in to our npm account via the terminal on vscode using the following command;

npm adduser

Answer the prompts for your username, password and email. You will also get another prompt to fill a one time password sent to your email. Once it's done, the terminal will show Logged in as <username> on https://registry.npmjs.org/.
You can also use the npm whoami command which will return your username in the terminal to verify you are logged in.

Build the library using the ng build command then
navigate to the build output folder using the command below

cd dist/ngx-stuff

Run the command below to publish the package to npm

npm publish

Yay! 🥳 you just published your library.

The published library built in this article can be found here.

You can checkout the repository for the entire project.

emekaelo / library-app

An angular application with a library project published to npm

LibraryApp

This project was generated with Angular CLI version 14.0.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

View on GitHub

Conclusion

Libraries are essential to the software development process and I hope this article has helped you understand how to build libraries or packages in Angular. Let me know if you have any comments or suggestions in the comment section and lastly, feel free to share the article so that others can learn. Happy publishing!

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

JavaScript concepts to remember

Emeka Elo-Chukwuma — Mon, 18 Jul 2022 07:22:26 +0000

This article is just a piece of my notepad that outlines some JavaScript concepts I don't necessarily forget but still have to check on just to be sure 😅. One reason for this post is because I am more likely to reach out for my device (and check the internet) than a physical notepad or even a note app and another reason is the ease of sharing with you.

JavaScript Concepts

1. Memory Heap

An unstructured region of memory where global variables and objects are stored.

2. Event loop

This pulls functions out of the event or callback queue and places it in the call stack when it becomes empty.

3. Call Stack

This represents the single thread provided for JavaScript code execution and keeps track of the operations to be executed. Whenever a function is finished, it is popped from the stack. The stack operates in a LIFO queue where the last function call in a function gets executed first.

4. Event queue

This holds mostly async functions processed by the web APIs so that when they are ready to run, the event loop can pull from it and add to the callstack.

5. Closures

This occurs when a function is being declared and returned in another function and this is done so that the inner function can have access to the scope of the outer function even after the outer function has been executed.

6. Hoisting

This is the process where the JavaScript interpreter moves declaration of functions, variables or classes to the top o their scope prior to code execution

7. Lexical Scope

This is the region in which a block of code has access to the variables defined in that scope.

8. Promise

A promise is an object representing the eventual completion or failure of an asynchronous operation. It is a special JavaScript object that initially has a pending state with an undefined value which when resolved, becomes a fulfilled state with a value as the result or becomes a rejected state with an error as the result.
The promise object has methods like then, catch and finally.

9. Async/Await

These keywords make handling asynchronous code more readable. The async keyword makes a function return a promise while the await keyword suspends further JavaScript code execution until the promise resolves.

How browser parses webpage and constructs it

Emeka Elo-Chukwuma — Sun, 17 Jul 2022 08:14:01 +0000

If you are curious about how browsers work or want to quickly prepare for your frontend interview 👀 then you have come to the right place. This article is basically from my notepad where I summarized the process of browser rendering while I was studying it myself. I felt it will be better to make it an article where I can easily find it for reference and also share with you. Alright, let's get straight to business.

Navigation

DNS Lookup

This happens the first time a client navigates to a certain domain. The browser requests a DNS lookup and the server responds with an IP address which will likely be cached for a certain duration so that subsequent requests will be faster.

TCP Handshake

Once the IP address is known, the browser sets up a connection via a TCP-three way handshake and this technique is often referred to as "SYN, SYN-ACK, ACK"(SYNchronize, SYNchronize-ACKnowledgement, and ACKnowledge). This is done so that computers that want to communicate can negotiate the parameters of connection before transmitting data such as HTTP browser requests.

The host, generally the browser, sends a TCP SYNchronize packet to the server. The server receives the SYN and sends back a SYNchronize-ACKnowledgement. The host receives the server's SYN-ACK and sends an ACKnowledge. The server receives ACK and the TCP socket connection is established.

TLS Negotiation

TLS negotiation is another handshake for establishing secure connection. This determines which cipher will be used to encrypt the communication, verifies the server and establishes that a secure connection is in place before beginning the actual data transfer.

Response

Once secure connection has been established, the browser makes a HTTP GET Requests and the response for this initial requests contains the first byte of data received.

TIME TO FIRST BYTE (TTFB) - This is the time between when the user made the request and the receipt of the first packet of HTML which is usually 14kb of data.

Parse

The browser turns the data it receives over the network into DOM and CSSOM which is used by renderer to paint a page on the screen.

Building the DOM tree

The browser parses the HTML mark up by tokenization and builds the DOM tree. The tokens include opening and closing tags, attribute names and values. The browser keeps parsing the HTML even when it sees non-blocking resources like an image or CSS file but pauses parsing when it sees script tags without an async or defer attribute.

Preload Scanner

This is an optimization feature that reduces blockages by retrieving resources in the background so that by the time the HTML parser reaches the requested assets, it may have already been in flight or downloaded

Building the CSSOM

The browser converts the CSS rules into a map of styles by going through each rule set in the CSS, creating a tree of nodes with parent, child and sibling relationship based on the CSS selectors.

Accessibility Object Model(AOM): the browser also builds an accessibility tree that assistive devices use to parse and interpret content. AOM is like a semantic version of the DOM.

Render

Style

The DOM tree and CSSOM tree are combined into a render tree then used to compute the layout of visible elements.

Layout

This is the process by which the width, height and location of the nodes in the render tree are determined, as well as the size and position of objects on the page.

Paint

The browser converts each box calculated in the layout phase to pixels on the screen drawing visual parts of an element like text colors, borders, shadows etc.

Reference

MDN Docs - Populating the page: how browsers work

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

Building password validation with strength meter in React with hooks

Emeka Elo-Chukwuma — Sat, 16 Jul 2022 14:49:13 +0000

Introduction

When building applications, you cannot avoid handling authentication and one of the ways to handle authentication is by receiving user data via a sign up or registration form and such forms contain passwords. You don't just want your users to use strong passwords that meet certain criteria but also visually inform them of how strong their passwords are during account creation.

In as much as password validation is done on the backend, the frontend validation helps guide the user in sending what the backend expects which ensures that your users as well as your systems are more secure. This article will show how to implement password validation from scratch(no library) as well as show the strength of the current password as the user types.

Demo

Here is a stackblitz demo of what we will be building.

Password validation criteria

For users to fulfill our "mysterious"🪄 validation criteria, their passwords must contain;

One uppercase character
One lowercase character
One numeric character
One special character
Eight or more characters

Or else,

We will be using these regex patterns in the code snippet below to handle the validation:

  const atLeastOneUppercase = /[A-Z]/g; // capital letters from A to Z
  const atLeastOneLowercase = /[a-z]/g; // small letters from a to z
  const atLeastOneNumeric = /[0-9]/g; // numbers from 0 to 9
  const atLeastOneSpecialChar = /[#?!@$%^&*-]/g; // any of the special characters within the square brackets
  const eightCharsOrMore= /.{8,}/g; // eight characters or more

Handling component state

State handling is inevitable and gladly a lot more easier with React hooks. Let's outline the states to track.

  const [meter, setMeter] = React.useState(false);
  const [password, setPassword] = React.useState('');

meter: This handles the visibility of the password strength meter.
password: This takes care of the actual password the user types into the password field.

passwordTracker: Just a local variable that stores all the characters that pass a validation criteria as well as each criteria that they pass. It does so by storing the return value of the match() method(which is an array of the passing character(s)) to the property in the passwordTracker object that corresponds with the validation criteria.

    const passwordTracker = {
    uppercase: password.match(atLeastOneUppercase),
    lowercase: password.match(atLeastOneLowercase),
    number: password.match(atLeastOneNumeric),
    specialChar: password.match(atLeastOneSpecialChar),
    eightCharsOrGreater: password.match(eightCharsOrMore),
  }

Password input field and strength meter

This is a simple input field with functions to execute based on browser events. When a user focuses on the field, an anonymous function sets the meter state to true thereby displaying the password strength meter and validation criteria. The onChange event updates the state of the actual password as the user types.

       <form>
        <input
          onFocus={() => setMeter(true)}
          onChange={(e) => setPassword(e.target.value)}
          type="password"
          placeholder="Enter password...pwetty please"
          value={password}
          name="password"
        />
        {meter && (
          <div>
            <div className="password-strength-meter"></div>
            <div>
              {passwordStrength < 5 && 'Must contain '}
              {!passwordTracker.uppercase && 'uppercase, '}
              {!passwordTracker.lowercase && 'lowercase, '}
              {!passwordTracker.specialChar && 'special character, '}
              {!passwordTracker.number && 'number, '}
              {!passwordTracker.eightCharsOrGreater &&
                'eight characters or more'}
            </div>
          </div>
        )}
      </form>

In the validation criteria section, the negated value of a property is used to determine whether a criteria should be rendered or not. For example, if a password passes the atLeastOneUppercase regex, the value of the uppercase property is updated to a truthy value so that when negated(!), becomes false and does not render the 'uppercase, ' part any more. When falsy(null) it negates the value and becomes truthy which renders the 'uppercase, ' part letting users know that they still have to fulfill that criterion.

Lastly, we have the passwordStrength variable whose value is gotten from the number of truthy values in passwordTracker object.

const passwordStrength = Object.values(passwordTracker).filter(value => value).length;

The idea is if 3 validation criteria are passed, the corresponding properties will have truthy values while the rest have falsy values (null). To know the number of criteria passed, we use the Object.values() method on the passwordTracker which returns an array of values. Then we filter for the truthy values and then obtain the length of the array with a .length.

passwordStrength is mainly use to determine the color and width of the password strength meter and also show or hide the 'Must contain ' part based on if all criteria are passed or not.

With CSS-in-JS, we are able to execute javaScript in our CSS styles using short circuit evaluation which assigns various colors to the background-color property. The width of the meter is given in percentage by multiplying the ratio of the number of passed criteria(which could be 1,2,3,4 or 5) to the total number of criteria(5) by 100

.password-strength-meter::before {
            content: "";
            background-color: ${
              ['red', 'orange', '#03a2cc', '#03a2cc', '#0ce052']
              [passwordStrength - 1] || ''
            };
            height: 100%;
            width: ${(passwordStrength / 5) * 100}%;
            display: block;
            border-radius: 3px;
            transition: width 0.2s;
          }

Conclusion

It is more aesthetically pleasing and a better user experience to pinpoint the requirements a user needs to fulfill in order to navigate your app smoothly.

I really hope you've gained some insight on this article on how to implement password validation with password strength meter. I would love to know if there are any improvements that can be made on this implementation and also if you would prefer using a library over self implementation.

Feel free to share other implementations you have come across, suggestions, comments or questions.
Thanks for reading and happy coding.

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

Module scoped styling in Angular 13

Emeka Elo-Chukwuma — Fri, 15 Jul 2022 11:24:44 +0000

Angular convention provides us with the concept of modules typically used for grouping features in our applications. I heavily rely on this and as such, get into the dilemma of styling those modules when I want each module to have global styles that only affect all components in that particular module.

This article shows various ways of achieving module scoped styling in Angular.

You can jump to the stackblitz demo to check it out.

Application architecture

Firstly, let me describe the application architecture for these use cases.
We have an angular 13 application in a stackblitz which has the app module and 3 lazy-loaded modules with 2 components in each module.
The styles.scss global stylesheet has the style below which is applied across the entire application

body {
  color:red
}

I will be using the colors of the paragraphs to show how you can leverage module scoped styling and what it entails.

Currently, this is what the color of the paragraphs in all components look like

Solution 1: Using the `:host` selector in the stylesheet of the module component

With this method, the :host selector is used to style the host element(app-module-one) and then the children(components) of the parent host element inherit the css property. The :host selector can also be combined with other selectors if you want to style the descendants of the host element.

We add this in module-one.component.scss

:host {
  color: blue;
}

And now, every component in module one gets the styles

You can add more properties relating to font, background color e.t.c... that you want applied to all components of the module. Ideally inheritable css properties.

Solution 2: Creating a separate stylesheet for modules and importing it in components you need it in

It may be preferred to use an entirely separate stylesheet which is added in the styleUrls array of the components the styles should be applied to.

We'll create a stylesheet called module-two-styles.scss in the module-two directory (so it's easy to find) and add the style below.

/* module-two-styles.scss */

p {
  color: green;
}

We're simply styling the p tag by giving the color property a value of green.

Then import the module-two-styles.scss in the first.component.ts, second.component.ts and module-two.component.ts files in module-two folder.

/* module-two/first/first.component.ts */

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss','../module-two-style.scss']
})

/* module-two/second/second.component.ts */

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.scss','../module-two-style.scss']
})

/* module-two/module-two.component.ts */

@Component({
  selector: 'app-module-two',
  templateUrl: './module-two.component.html',
  styleUrls: ['./module-two.component.scss','module-two-style.scss']
})

Now this will only apply the style to the components you imported the stylesheet into.

Some reasons for doing this is sometimes, you may be working in a codebase that has the potential to be largely refactored while you're working on something or maybe you want to create some sort of easily manageable distinction between your styles and the ones that were already in the existing project and cannot afford to tamper with the global stylesheet as you consider the time constraints involved.

Tip for using `styleUrls`

The position of the stylesheet paths in the styleUrls array matters. Stylesheets get overridden by other stylesheets that come after them in the array.

Demo

Here is a stackblitz that contains a demo for the article. You can quickly explore and experiment more style properties.

Thank you for reading

Feel free to leave suggestions or questions in the comment especially if you have challenges with styling your application a certain way. Also share the article if you gained something or feel it was helpful.

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

Adding Forestry CMS to an Angular Scully blog site

Emeka Elo-Chukwuma — Thu, 14 Jul 2022 09:05:36 +0000

Introduction

This article aims to guide you through the configuration of Forestry CMS in your angular project that is built with Scully static site generator and deployed on Netlify.
We will be using the Angular scully blog project we built in a previous article. Kindly check it out if you haven't so you can be up to speed.

Forestry CMS

Forestry CMS is a git based headless CMS that can be used to manage content on sites stored in a repository. It makes commits and pushes to your selected repository when you save content on the CMS as well as fetching latest commits to update content on the CMS. It allows you embrace the jamstack.

Importing our site

Since we already have a site with its repository on github, let's head over to Forestry and import our site by signing up.
You will be taken to a page that shows a few questions. When asked What kinds of sites do you plan to build with Forestry?, choose Other then click complete registration.

After that step, you will be taken to the page where you can add your site. Select Add site at the top right corner and choose Other option as your static site generator then click next.

Select your git provider for where your site's repository is stored

Complete github authentication so that forestry can access your repositories. Then select the repository and branch your site is deployed from.

Once it's done, you'll be taken to the forestry CMS.

Adding blog section on our CMS

Next, we need to configure our side bar so that the CMS can read contents from our repository. Click the Configure side bar button and select add section for our blog. Choose the Directory section type.

Fill the label and content directory fields accordingly and click done then save.

Once you save, the new section appears at the left side bar and fetches the available markdown files form your repository in the directory you specified. Click on the blog section to see your content and checkout your posts.

Click on the create new button and select Blog from the dropdown to add a new post. You'll be prompted to create a frontmatter template if you do not have such so let's do that.

Creating a frontmatter template

Select the Create a new template option, name the template and choose any template style you like.

Once you click the create template button, you can begin adding fields for your frontmatter.

Adding a field

Click the Add field button and select from a variety of field types. You can even build on your other frontmatter templates.
I've added a text field type

After adding all the fields for your frontmatter template, you can save it.

Generating a frontmatter template

If you do not want to create templates from the beginning, you can generate one from one of your posts so it can be reused.
Select the Create based on existing template option, name the template and choose a post with the frontmatter you would like to replicate.

Once you click the create template button, it shows all the automatically created fields form the frontmatter of the post you selected. It's pretty awesome plus you can also add more fields to that template.

Now when we create a blog and select the frontmatter template, all of the fields get rendered in the editor section.

Media configuration

We need to tell forestry CMS where we store our media files so it knows where to save new ones we add and where it should read media files from so we can see the correct media file when updating a post.
Select media from the left side bar and click change upload folder.
Edit the upload directory to src/assets/images and public path to /assets/images then save media settings.
Select media from the left side bar again and you'll be able to view your media files.

Adding a blog post

Let's make a new blog post with the generated frontmatter template. Don't forget to toggle the published button for it to appear on your blog. When you save, Forestry CMS makes a commit to your repository and creates a blog post which is saved as new markdown file.

Here is the link to the new blog post that was created with forestry CMS.

Conclusion

Forestry CMS is packed with various functionalities that makes it easier to manage content on your site.

I hope you find this article helpful and feel free to share with others or reach out if you have any questions, suggestions or comments.
Thanks for reading.

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

Adding Netlify CMS to an Angular Scully blog site

Emeka Elo-Chukwuma — Wed, 13 Jul 2022 08:31:38 +0000

Introduction

This article aims to guide you through the configuration of netlify CMS in your angular project that is built with Scully static site generator and deployed on Netlify.
We will be using the Angular scully blog project we built in a previous article. Kindly check it out if you haven't so you can be up to speed.

Demo

Here is the final result of what we will be building

Netlify CMS

This is a git-based CMS that allows us manage the content of our applications that are stored in repositories on any of the version control platforms such as Github, Bitbucket or Gitlab. It supports a variety of file formats like markdown, JSON, YAML and TOML.

Now that we have some background with the tools we are using, let's begin

Adding Netlify CMS to your Angular-Scully app

In the src folder in your app, create a folder named admin which will contain two files namely; index.html and config.yml.

src
 └ admin
     ├ index.html
     └ config.yml

The src/admin/index.html is the file which loads/fetches the admin panel that handles access to the netlify CMS app for your your site while the src/admin/config.yml handles Netlify CMS configuration.

Add the code snippet below to the src/admin/index.html

<!-- src/admin/index.html -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

The code snippet above is just basic html page that loads the actual admin page from a CDN.

Here is a sample configuration for the config.yml. It is also important to go through the configuration docs for more insight on what these settings do. Add this snippet below or customise to fit your use case.

# src/admin/config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: "src/assets/images" # Media files will be stored in the repo under assets/images
public_folder: "/assets/images" # The src attribute for uploaded media will begin with /assets/images

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    #slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      #- {label: "Slug", name: "slug", widget: "string"}
      - {label: "Published", name: "published", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Post Image", name: "image", widget: "image"}
      - {label: "Rating (scale of 1-5)", name: "rating", widget: "number"}
      - {label: "Body", name: "body", widget: "markdown"}

Include the src/admin directory of the Netlify CMS in your angular.json file so that the files can be included in the build directories of your static site.

"projects": {
    "angular-blog": {
      ...
      "architect": {
        "build": {
          ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/admin"
            ],
            ...
          },
          ...
      }
    }
  },

When you run the command npm run build you should see the admin directory in the dist folder:

dist
├ angular-blog
|    └ admin
|        ├ index.html
|        └ config.yml
└ static
     └ admin
          ├ index.html
          └ config.yml

Netlify CMS authentication

Authentication on Netlify web app (the backend)

Steps to enable Identity and Git Gateway

Log into your netlify web app platform
Once you get to your dashboard, click on sites tab
Select the site you want to enable netlify identity for
Click site settings tab
Click on Identity on the left side tab
Click the Enable Identity button
Under Registration Preferences, click Edit settings and choose Invite only option. (For the sake of the demo, I have left mine as open)
If you would like to enable third-party login, add a provider in the External providers section.
Scroll down to Git Gateway in the Services section and click the Enable Git Gateway button.

Authentication in your app (the frontend)

We need to add the Netlify Identity Widget which basically handles the interface needed to connect to the backend we configured in the previous step. To include the widget, add the script tag below in the head of your CMS index file at src/admin/index.html and also in the head of your main index file src/index.html.

<!-- src/admin/index.html -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

<!-- src/index.html -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBlog</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

Push your code to your github repo which will trigger a build process on netlify.

Accessing the CMS in your browser

You can access your site's CMS at yoursite.com/admin/

Checkout the CMS demo for Angular-Scully blog. Click login with Netlify Identity and choose Sign up so you can create an account to access the CMS.

Please be good and have fun posting. Thank you for reading.

Reference

Netlify documentation for adding Netlify CMS to your site

Connect

If you would like to connect with me, I'm available on;

Discord: brunoelo#8120
Twitter: BrunoElo

Creating an Angular blog with Scully and deploying on Netlify

Emeka Elo-Chukwuma — Tue, 03 May 2022 19:32:16 +0000

We'll be building a blog site with the Angular framework, Scully for static site generation(SSG) and then deploying the project on Netlify so that it can be accessible to the public.

What this article covers

Using Angular to build the blog architecture
Installing Scully library to handle static site Generation
Netlify deployment
Demo of this project
Repository for the demo

Setup requirements

We'll be using the following tools for this project

Angular v13
Tailwind
Scully
Node v14.15 (or higher)

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. It's an opensource frontend framework built by Google.

Scully is a library used for generating static sites built with Angular and ushers you into the jamstack. SSGs generate static pages when you build your project so that what you publish/deploy is the already built pages which can be indexed by google(for some of that SEO good good) and served quickly to clients. Without scully, our angular project will go through client side rendering where each page of the application that is visited is rendered by the browser at runtime.

Tailwind is a CSS utility library that is used to speed up the styling of applications by offering flexibility and conciseness.

Now that we have some background on the project, we can start building

Generating the Angular project

Use the command below to generate a new angular project. You can name your project what you like. I have chosen angular-blog

ng new angular-blog

You'll see the following questions. We want routing and SCSS stylesheet format.

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

After the project has been generated, serve the application using the ng serve command

ng serve

You'll be greeted with the standard angular welcome template.

Navigate to app.component.html and delete the entire content (we don't want that welcome page showing up) and then place <router-outlet></router-outlet> tags since this is where all our modules and components will be displayed based on the route configuration in app.routing-module.ts

Installing Scully

Run the command below to install scully and automatically make all the necessary configurations to the project

ng add @scullyio/init

During the installation, you'll get the question below. As at the time of this writing, pupeteer is the most stable renderer so we'll choose that.

? Which route renderer would you like to use?
  Scully platform server
> Puppeteer
  Playwright (beta)

Here is what the terminal looks like after the installation process

The init schematic of the scully installation made a couple of changes which include;

installing the pupeteer plugin
updating the app.module.ts by importing the ScullyLibModule
updating the package.json file with scully commands for building and serving the generated pages

    "scully": "npx scully --",
    "scully:serve": "npx scully serve --"

created a scully.angular-blog.config.ts file which is the scully configuration file.

Adding blog support to our project

Scully has a schematic for creating the blog section for our project

ng generate @scullyio/init:blog

This adds a lazy-loaded blog module's routes to the Angular application(app.routing-module.ts) and creates a ./blog folder for the blog's markdown files(where our blog posts will live).
Below is the current route configuration in app.routing-module.ts updated by scully.

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

It also updates the scully.angular-blog.config.ts with the blog routes to prerender.

A few other configurations to do

Now we have a module for our blog feature. The next things we need to create are;

a component for the list of blog posts using the command below

ng generate component blog/blog-list

a component that will show the actual blog post content using the command below

ng generate component blog/blog-post

We also need to go to the blog.routing.module.ts and fix up our route configuration as below

const routes: Routes = [
  {
    path: '',
    component: BlogComponent,
    children: [
      {path: ':slug', component: BlogPostComponent},
      {path: '', component: BlogListComponent}
      ]
  }
];

Lastly, we add the <router-outlet></router-outlet> in the blog.component.html to handle routing in the module.This page will display the blog list and blog posts based on the route configuration in blog-routing.module.ts

Configuring the route entry point for scully

After sorting out the module for our blog feature, we need to create an entry point for scully (typically the home page of our app).

It is suitable to leverage the Angular lazy-loaded module feature for our app home page because this part of our app is separate from the blog part.
Create a home module with the following command:

ng generate module home --route=home --module=app-routing

This updates the route configuration in app-routing.module.ts with the path for the home module. Set its path to an empty string.

const routes: Routes = [{
        path: 'blog',
        loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
    },
    {
        path: '',
        loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
    },
    {path: '**', redirectTo: 'blog', pathMatch: 'full'},
];

You can always add a redirect below the route configuration for the blog module if you don't want the home page to be accessed yet.

{path:'',redirectTo:'blog',pathMatch:'full'},

Building the Angular-Scully app

After all those configurations, we need to build our project with Angular, build with Scully then serve the built project on the Scully server but first, let's restart the Angular server.

Build the project by running

ng build

Then we build with scully using

npx scully

We can also modify the build command in our package.json so that it will run the two previous commands.

"build": ng build && npm run scully -- --scanRoutes

Now we can use npm run build to achieve the same thing.
After those two commands, a dist folder is created in the root directory of our project. This folder contains the two built versions of our site, The folder named angular-blog is the one built by Angular while the one named static contains the static pages generated by scully.
Now, we can start the scully server using the command:

npx scully serve

After the server starts successfully, navigate to http://localhost:4200/blog to see the angular app running, then in a separate tab, open this link http://localhost:1668/blog to see the static site. You browser should show a white page with the text blog-list works!.

To check our actual blog post (created by the init:blog schematic) go to the markdown file in the blog folder and copy the value of the slugs property in the frontmatter.

---
title: "2022-04-29-blog"
description: 'blog description'
published: false
slugs:
    - ___UNPUBLISHED___l2kp8pyl_z4RfUZ7hSOMdOfldi8yqeZcOKuebIId2
---

That is the current path(generated by scully) to the blog post when published: false. It's a private route to your blog post when it's still in draft version so you can share with anyone to get an article review before publishing. When you are ready to publish the post, you can set published: true and remove the slugs property which will allow scully use the file name(without the extension) as its path when it generates the static pages.

Go to address bar of the tab serving the static site and paste the slug after http://localhost:1668/blog/ then press enter. You should see the content of the blog post.

Now, we have confirmed that our blog feature is fully functional so next up is to add more blog posts.

Creating blog posts

We can create a blog post with the command below. The name option takes the name of your post.

ng generate @scullyio/init:post --name="Post 1"

This creates a markdown file in the blog folder.
When we open the newly created markdown file, we see this

---
title: Post 1
description: blog description
published: false
---

# Post 1

As you now know, the content between the three dashes is the frontmatter and below the frontmatter is the blog content.

The frontmatter is where we can add information about the post such as metadata, SEO e.t.c.
Let's update this markdown file to look like this

---
title: Post 1
description: blog description
published: true
image: /assets/images/enigma.jpg
seo: {
metaDescription: First post for my angular scully blog,
metaTitle: First post
},
---

# Post 1

I have added an image in the corresponding directory which I'll render in post.
When we're satisfied with our markdown file, we can build with the npx scully command.

A tip on knowing which to build with

ng build is only needed when you modified something in your angular app. The scully config file, plugins, and eventual markdown files are not part of your Angular app. Although this may seem evident, if this is your first time using Scully it is easy to rebuild Angular even if it is not needed. When writing Scully plugins OR modifying your blog's markdown files, you DO NOT need to ng build the app each time you re-run Scully. Again, ng build Angular only if the Angular app changes

Showing all blog posts

Let's head over to blog-list.component.ts to work out the logic that handles data for the component.
In this component, we will inject the ScullyRoutesService as a dependency which will give us access to the blog posts routes.

import { Component, OnInit } from '@angular/core';
import {ScullyRoute, ScullyRoutesService} from "@scullyio/ng-lib";
import {Observable} from "rxjs";

@Component({
  selector: 'app-blog-list',
  templateUrl: './blog-list.component.html',
  styleUrls: ['./blog-list.component.scss']
})
export class BlogListComponent implements OnInit {
  links$: Observable<ScullyRoute[]> = this.scully.available$;

  constructor(private scully: ScullyRoutesService) { }

  ngOnInit(): void {
    this.getPublishedPosts();
  }

  getPublishedPosts() {
    this.links$ = this.links$.pipe(tap(val) => console.log(val))
  }
}

What we want to render are the published posts, that's why we get the published routes from the available$ property on the ScullyRoutesService.

In the blog-list.component.html we can build the template that shows all blog posts. We'll work with the code below for now.

<div>
  <ul>
    <li *ngFor="let post of links$ | async">
    <a [href]="post.route">{{post.title}}</a>
    </li>
  </ul>
</div>

After you save, you should see an array of two routes in the console. We can't see any blog posts route yet because we haven't built with scully after changing the published property to true.

Let's ensure that the published property in our markdown files are set to true then build with scully to update our published routes.
Now when we reload, we should see an array of 4 routes in the console. However, since we only want blog posts routes, we'll need to transform our data with some rxjs.
Let's update the getPublishedPosts function

getPublishedPosts() {
    this.links$ = this.links$.pipe(map((links) => links.filter((link) =>
      link.route.startsWith('/blog/'))),tap((val) => console.log(val)));
  }

To ensure the scully version of our site is updated, let's run the command:

npm run build

Now we should have our page like this.

You can click on the links to see that they show the corresponding posts.

Accessing the data in the blog post page

We can get the route data of a particular page we navigate to with the help of the ScullyRoutesService by subscribing to the observable returned by the getCurrent() method.
Add the code below to the blog-post.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ScullyRoute, ScullyRoutesService} from "@scullyio/ng-lib";
import {Subject, takeUntil} from "rxjs";
import {tap} from "rxjs/operators";

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html',
  styleUrls: ['./blog-post.component.scss']
})
export class BlogPostComponent implements OnInit, OnDestroy {
  currentRoute: ScullyRoute = {} as ScullyRoute;
  onDestroy$ = new Subject<void>();

  constructor(private scully: ScullyRoutesService) {
  }

  ngOnInit(): void {
    this.getCurrentPost()
  }

  getCurrentPost() {
    this.scully.getCurrent()
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((routeData: ScullyRoute) => {
        this.currentRoute = routeData;
      });
  }

  ngOnDestroy() {
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}

Details of our current route is assigned to this.currentRoute property and this allows us use the route data for that particular post the way we want.

Styling our blog

Firstly, we need to create another component which will be our reusable component for the blog cards. Use the command:

ng generate component blog/blog-list/blog-card

Open the blog-card.component.html and place the code below inside it

<li *ngFor="let post of links$ | async">
    <a [href]="post.route">{{post.title}}</a>
</li>

Then we make use of this component in our blog-list.component.html via the app-blog-card selector in this way

<div>
  <ul>
    <app-blog-card [post]="post" *ngFor="let post of links$ | async"></app-blog-card>
  </ul>
</div>

We are also passing each route object in the array as post through the app-blog-card component therefore, we will need to receive this data from the parent component(blog list) in our child component (blog card) using the Input() decorator.
Let's do that by putting the code below in the blog-card.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {ScullyRoute} from "@scullyio/ng-lib";

@Component({
  selector: 'app-blog-card',
  templateUrl: './blog-card.component.html',
  styleUrls: ['./blog-card.component.scss']
})
export class BlogCardComponent implements OnInit {
  @Input() post: Partial<ScullyRoute> = {};

  constructor() { }

  ngOnInit(): void {
  }
}

Finally, some styling

You can use any styling format you want. I'll be using tailwind.
Let's use the straightforward tailwind documentation to configure it in our project.
After the configuration is done, we'll need to restart the angular server.
Update the blog-card.component.html with the new template below

<li class="h-full">
  <a [href]="post.route" class="h-full w-full lg:max-w-full lg:flex hover:bg-gray-100">
    <div
      class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
      [style.background-image]="'url(' + (post['image'] || 'https://images.unsplash.com/photo-1496494118863-9cf5d1e70cd6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80') + ')'"
      title="Mountain">
    </div>
    <div
      class="w-full border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400  rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2">{{post.title}}</div>
        <p class="text-gray-700 text-base">{{post['seo']?.metaDescription || post['description']}}</p>
      </div>
    </div>
  </a>
</li>

Also update the blog-list.component.html

<div>
  <ul class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
    <app-blog-card [post]="post" *ngFor="let post of links$ | async"></app-blog-card>
  </ul>
</div>

The code below adds a header to our site. Add it in app.component.html

<nav class="flex flex-wrap items-center justify-between bg-gray-800 p-6 w-full">
  <div>
    <a class="text-white no-underline hover:text-white hover:no-underline" routerLink="/">
      <span class="text-2xl">Angular scully blog</span>
    </a>
  </div>
  <ul class="list-reset flex justify-end flex-1 items-center">
    <li class="mr-3">
      <a class="inline-block text-white no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
         routerLinkActive="" routerLink="/blog">blog</a>
    </li>
  </ul>
</nav>
<router-outlet></router-outlet>

Now we have a nice user interface that shows all blog post

Let's add the code below for the blog post user interface(blog-post.component.html)

<main class="mx-auto max-w-screen-sm max-w-screen-lg">
  <img [src]="currentRoute['image'] || 'https://cdn.mos.cms.futurecdn.net/4uiRZ5nNAgpHSifSjaKwcC-970-80.jpg.webp'"
       alt="nft"/>
  <h3>ScullyIo content</h3>
  <hr>

  <!-- This is where Scully will inject the static HTML -->
  <scully-content></scully-content>
  <hr>
  <h4>End of content</h4>
</main>

Finally, use the npm run build command to build the project and checkout the scully static version in your browser.

Pushing to Github

Create a repository on Github and then copy the remote url (https://github.com/<github-username>/<repository-name>.git) so that we can add it for our project using the command below:

git remote add origin https://github.com/<github-username>/<repository-name>.git

Rename the branch to main with the command below:

git branch -M main

Push to github with the command below:

git push origin main

Here's a link to the repository for this article demo.

emekaelo / angular-scully-blog

A demo application for the angular scully blog article. Can be used as a starter template

AngularBlog

This is the repository for the Angular blog demo with Netlify CMS and Forestry CMS integration deployed on Netlify.

Tech stack

The tools used to build the project include;

Angular version 13.3
Scully
Tailwind
Netlify CMS
Forestry CMS

Getting started

After cloning the project, run the command:

npm install

Use the command below to run the angular and scully build commands:

npm run build

Serve the angular app:

ng serve

Serve the scully version which is the static site:

npx scully serve

Navigate to http://localhost:4200/ to see the Angular app and http://localhost:1668/ to see the scully static site

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

View on GitHub

Deploying to Netlify

After pushing our Angular Scully blog to github, we are ready to deploy on Netlify. If you do not have an account yet, you can signup here or go ahead and log in to your account if you have one.

Choose import from git

Select Github

Connect the repository you want to deploy. You may need to configure netlify for your github account if it has not been setup. This is needed for netlify to have access to the repository

Provide the path to the folder where the scully generated static pages are as well as the build command

Click the Deploy site button and watch as netlify builds your project.
Congratulations on making it to the end and have fun personalising your site as you like.

Here's a link to the deployed site

Conclusion

I do hope this article has been helpful in guiding you through creating your blog site with Angular and scully from scratch.
You can leave questions or suggestions in the comments or reach out to me on twitter BrunoElo if you like. Thanks for reading!

DEV Community: Emeka Elo-Chukwuma

How to create an Angular library or package and publish on npm

What are libraries?

Requirements

Setting up the library

Building features in the library

Utility feature

Component feature

Building the library

Publishing to NPM

emekaelo / library-app

An angular application with a library project published to npm

LibraryApp

Development server

Code scaffolding

Build

Running unit tests

Running end-to-end tests

Further help

Conclusion

Connect

JavaScript concepts to remember

JavaScript Concepts

1. Memory Heap

2. Event loop

3. Call Stack

4. Event queue

5. Closures

6. Hoisting

7. Lexical Scope

8. Promise

9. Async/Await

How browser parses webpage and constructs it

Navigation

DNS Lookup

TCP Handshake

TLS Negotiation

Response

Parse

Building the DOM tree

Preload Scanner

Building the CSSOM

Render

Style

Layout

Paint

Reference

Connect

Building password validation with strength meter in React with hooks

Introduction

Demo

Password validation criteria

Handling component state

Password input field and strength meter

Conclusion

Connect

Module scoped styling in Angular 13

Application architecture

Solution 1: Using the :host selector in the stylesheet of the module component

Solution 2: Creating a separate stylesheet for modules and importing it in components you need it in

Tip for using styleUrls

Demo

Connect

Adding Forestry CMS to an Angular Scully blog site

Introduction

Forestry CMS

Importing our site

Adding blog section on our CMS

Creating a frontmatter template

Adding a field

Generating a frontmatter template

Media configuration

Adding a blog post

Conclusion

Connect

Adding Netlify CMS to an Angular Scully blog site

Introduction

Demo

Netlify CMS

Adding Netlify CMS to your Angular-Scully app

Solution 1: Using the `:host` selector in the stylesheet of the module component

Tip for using `styleUrls`