This project was generated with Angular CLI version 18.2.3.

1. Clone only the remote primary HEAD (default: origin/master)

git clone <url> --single-branch

2. Only specific branch

git clone <url> --branch <branch> --single-branch [<folder>]

git clone <url> --branch <branch>

3. Cloning repositories using degit

   • master branch is default.

npx degit github:user/repo#branch-name <folder-name>

4. Cloning this project with skeleton

git clone https://github.com/actionanand/angular-form.git --branch 1-skeleton angular-proj-name

npx degit github:actionanand/angular-form#1-skeleton angular-proj-name

1. Install the compatible node version

 nvm install v20.13.1

2. Install and Configure Prettier

   • Install prettier as below:

    yarn add prettier -D

   • Create a .prettierrc file and write down the format as below: - online ref

   trailingComma: 'all' tabWidth: 2 useTabs: false semi: true singleQuote: true bracketSpacing: true bracketSameLine: true arrowParens: 'avoid' printWidth: 120 overrides: - files: - '*.js' - '*.jsx' options: bracketSpacing: true jsxSingleQuote: true semi: true singleQuote: true tabWidth: 2 useTabs: false - files: - '*.ts' options: tabWidth: 2

   • Create a .prettierignore file and write as below(sample)

   # Ignore artifacts: build coverage e2e node_modules dist dest reports # Ignore files *.lock package-lock.json yarn.lock

3. Install Es Lint, if not installed

ng add @angular-eslint/schematics

if error comes, use the below command

ng add @angular-eslint/schematics@next

4. Configure pre-commit hooks

Pre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. husky can be used to easily configure git hooks to prevent bad commits. We will use this along with pretty-quick to run Prettier on our changed files. Install these packages, along with npm-run-all, which will make it easier for us to run npm scripts:

yarn add husky pretty-quick npm-run-all -D

To configure the pre-commit hook, simply add a precommit npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, run-s to run scripts in sequence, and run-p to run scripts in parallel:

 "precommit": "run-s format:fix lint", "format:fix": "pretty-quick --staged", "format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"", "format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"", "lint": "ng lint",

5. Initialize husky

   • Run it once

    npm pkg set scripts.prepare="husky install" npm run prepare

   • Add a hook

    npx husky add .husky/pre-commit "yarn run precommit" npx husky add .husky/pre-commit "yarn test" git add .husky/pre-commit

   • Make a commit

    git commit -m "Keep calm and commit" # `yarn run precommit and yarn test` will run every time you commit

6. How to skip prettier format only in particular file

   1. JS

   matrix(1, 0, 0, 0, 1, 0, 0, 0, 1); // prettier-ignore matrix( 1, 0, 0, 0, 1, 0, 0, 0, 1 )

   2. JSX

   <div> {/* prettier-ignore */} <span ugly format='' /> </div>

   3. HTML

   <!-- prettier-ignore --> <div class="x" >hello world</div > <!-- prettier-ignore-attribute --> <div (mousedown)=" onStart ( ) " (mouseup)=" onEnd ( ) "></div> <!-- prettier-ignore-attribute (mouseup) --> <div (mousedown)="onStart()" (mouseup)=" onEnd ( ) "></div>

   4. CSS

   /* prettier-ignore */ .my ugly rule { }

   5. Markdown

    <!-- prettier-ignore --> Do not format this

   6. YAML

   # prettier-ignore key : value hello: world

   7. For more, please check

• GitHub Actions for Angular
• Angular 16 - milestone release

If you try to update (say email value when app loads) template driven form programmatically using setValue on NgForm, it'll throw the error as below

We have to use setTimeout to fix the issue as below:

// to set value for whole form setTimeout(() => { this.formData().setValue({ email: 'anand@ar.com', password: '', }); }, 1);

If you try to update (say email value when app loads) template driven form programmatically using setValue on the controls of NgForm, it'll throw the error as below

We have to use setTimeout to fix the issue as below:

setTimeout(() => { this.formData().controls['emailField'].setValue('anand@ar.com'); }, 1);

See the code in this project here