https://github.com/actionanand/angular-playground
It has ...
https://github.com/actionanand/angular-playground
angular angular18 angular19 angular2 material
Last synced: 27 days ago
JSON representation
It has ...
- Host: GitHub
- URL: https://github.com/actionanand/angular-playground
- Owner: actionanand
- Created: 2024-11-26T16:07:43.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-29T19:02:27.000Z (about 1 year ago)
- Last Synced: 2025-01-27T13:24:34.001Z (12 months ago)
- Topics: angular, angular18, angular19, angular2, material
- Language: TypeScript
- Homepage: https://actionanand.github.io/angular-playground/
- Size: 1.05 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Playground
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
This project primarily focuses on working with Angular Material tables and their customizations.
## Cloning Guide
1. Clone only the remote primary HEAD (default: origin/master)
```bash
git clone --single-branch
```
2. Only specific branch
```bash
git clone --branch --single-branch []
```
```bash
git clone --branch
```
3. Cloning repositories using degit
- master branch is default.
```bash
npx degit github:user/repo#branch-name
```
4. Cloning this project with skeleton
```bash
git clone https://github.com/actionanand/angular-playground.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/angular-playground#1-skeleton angular-proj-name
```
## Automate using `Prettier`, `Es Lint` and `Husky`
1. Install the compatible node version
```bash
nvm install v22.11.0
```
2. Install and Configure Prettier
- Install prettier as below:
```bash
yarn add prettier -D
```
- Create a `.prettierrc.yml` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)
```yml
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)
```gitignore
# 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
```bash
ng add @angular-eslint/schematics
```
if error comes, use the below command
```shell
ng add @angular-eslint/schematics@19.0.0-alpha.4
# or
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](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:
```bash
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:
```json
"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
```bash
npx husky init
```
- Add a hook
```bash
echo "yarn run precommit" > .husky/pre-commit
echo "yarn run test" > .husky/pre-commit
```
- Make a commit
```bash
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
```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
```jsx
{/* prettier-ignore */}
```
3. HTML
```html
hello world
```
4. CSS
```css
/* prettier-ignore */
.my ugly rule
{
}
```
5. Markdown
```md
Do not format this
```
6. YAML
```yml
# prettier-ignore
key : value
hello: world
```
7. For more, please [check](https://prettier.io/docs/en/ignore.html)
## Resources
1. [Mat Checkbox Column - Stackblitz (Angular 10)](https://stackblitz.com/edit/angular-mattable-checkbox-column)
2. [Mat Checkbox Column with pagination - Stackblitz (Angular 7)](https://stackblitz.com/edit/angular-mat-table-checkbox-select-all-ivt1dw)
## Wiki
- [Reusable Generic table - stackblitz](https://stackblitz.com/edit/angular-generic-mat-table)
- [Reusable table - stackblitz](https://stackblitz.com/edit/angular-dev-reusable-generic-table)
- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
- [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)
- [Meet Angular v19 - Official](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84)
- [Angular 19 – what’s new?](https://angular.love/angular-19-whats-new)
- [Angular Version 19: New Features and Updates](https://dev.to/this-is-angular/angular-version-19-new-features-and-updates-3nk7)
- [Angular 19 - 5 Game-Changing Features You Need to Know](https://dev.to/this-is-angular/angular-19-5-game-changing-features-you-need-to-know-32cd)
- [Hello, Angular 19](https://medium.com/@sehban.alam/hello-angular-19-77fb1691bbb5)
- [Changing the visibility of your GitHub Pages site](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site)
- [The `package.json` guide](https://flaviocopes.com/package-json/#author)