actionanand / ng-template-depth

This is a hobby Angular Repo for ng-template in depth using PNPM

NgTemplateDepth

This project was generated with Angular CLI version 13.1.0. with pnpm node package manager

What to do after cloning?

pnpm install

• If pnpm is not installed,

npm install -g pnpm

How to create project using pnpm

ng new my-new-pnpm-project --skip-install

• Stackoverflow Guide

• PNPM CLI

Development server

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

How to deploy to Github pages, if pnpm is used

1. Add 'angular-cli-ghpages' under dev dependencies as below

"angular-cli-ghpages": "^1.0.0",

2. Add the following json property to angular.json file under architect

  "deploy": {
    "builder": "angular-cli-ghpages:deploy"
  }

3. Install all the missing packages

pnpm i

4. Deploy the app

ng deploy --base-href=/ng-template-depth/

• ng-template-depth is the name of the repo.

Resources

1. TemplateRefs are Angular’s Render Props

   • Gist Page
   • ngTemplateOutlet: The secret to customisation - In Depth Dev
   • How to Use ngTemplateOutlet in Angular
   • Angular ng-template, ng-container and ngTemplateOutlet - Angular University

2. Build a Toggle Component - part 1

3. Write Compound Components - part 2

4. Communicate Between Components Using Dependency Injection - part 3a

• CSS buttons