https://github.com/actionanand/ng-template-depth

This is a hobby Angular Repo for ng-template in depth using PNPM
https://github.com/actionanand/ng-template-depth

angular angular13 ng-template pnpm

Last synced: 8 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/actionanand/ng-template-depth
• Owner: actionanand
• Created: 2021-12-10T09:19:59.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-24T11:58:53.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T00:58:16.028Z (8 months ago)
• Topics: angular, angular13, ng-template, pnpm
• Language: TypeScript
• Homepage: https://actionanand.github.io/ng-template-depth/
• Size: 546 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgTemplateDepth

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0. with `pnpm` node package manager

## What to do after cloning?

```bash

pnpm install

```

  - If pnpm is not installed,

```bash

npm install -g pnpm

```

## How to create project using `pnpm`

```

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

```

* [Stackoverflow Guide](https://stackoverflow.com/questions/52948906/how-do-i-use-pnpm-in-my-angular-project-to-manage-packages)

* [PNPM CLI](https://pnpm.io/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

```json

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

```

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

```json

  "deploy": {

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

  }

```

3. Install all the missing packages

```bash

pnpm i

```

4. Deploy the app

```bash

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

```

* `ng-template-depth` is the name of the repo.

## Resources

1. [TemplateRefs are Angular’s Render Props](https://medium.com/angular-in-depth/templaterefs-are-angulars-render-props-a2b97cbcc362)

    - [Gist Page](https://gist.github.com/isaacplmann/977cba11d25a1402b8de228b18ed02cd)

    - [ngTemplateOutlet: The secret to customisation - In Depth Dev](https://indepth.dev/posts/1405/ngtemplateoutlet)

    - [How to Use ngTemplateOutlet in Angular](https://www.tektutorialshub.com/angular/ngtemplateoutlet-in-angular/)

    - [Angular ng-template, ng-container and ngTemplateOutlet - Angular University](https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/)

2. [Build a Toggle Component - part 1](https://medium.com/angular-in-depth/build-a-toggle-component-6e8f44889c2c)

3. [Write Compound Components - part 2](https://medium.com/angular-in-depth/write-compound-components-1001449c67f0)

4. [Communicate Between Components Using Dependency Injection - part 3a](https://medium.com/angular-in-depth/communicate-between-components-using-dependency-injection-d7280567faa7)

  - [CSS buttons](https://copy-paste-css.com/)