https://github.com/lucasnbsb/angularpatterns

This is my personal patterns stash, stuff I use regularly and don't want to forget
https://github.com/lucasnbsb/angularpatterns

Last synced: about 1 month ago
JSON representation

This is my personal patterns stash, stuff I use regularly and don't want to forget

• Host: GitHub
• URL: https://github.com/lucasnbsb/angularpatterns
• Owner: lucasnbsb
• Created: 2024-04-28T17:54:08.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-09-12T03:01:00.000Z (4 months ago)
• Last Synced: 2024-09-12T12:40:01.323Z (4 months ago)
• Language: TypeScript
• Homepage: https://lucasnbsb.github.io/AngularPatterns/
• Size: 1.49 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Angular patterns.

This is meant to be a knowlege base for the patterns that keep popping up in Angular projects.

## How to use this repo:

Running the project with `npm run start` will show a menu with the implemented examples for the patterns. Each pattern has the it's own folder in the app directive

## New Angular project configuration:

### Angular CLI:

Set your default flags for the CLI early, this will save you a lot of time.

```json

  "@schematics/angular:component": {

    "inlineTemplate": false,

    "changeDetection": "OnPush",

    "style": "none",

    "skipTests": true // don't skip tests.

  }

  // if you use a shared module, set it's path

  "@schematics/angular:service": {

    "path": "shared/services"

  },

  "@schematics/angular:pipe": {

    "path": "shared/pipes",

    "module": "pipes",

    "export": true

  }

```

### ESLint:

```

ng add @angular-eslint/schematics

```

in the `settings.json` file:

```json

  "eslint.options": {

    "extensions": [".ts", ".html"]

  },

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"]

```

### Prettier:

Format on save pretty much does not work on html unless you do a full file formatting on save. which is a git nightmare.

**Setup**:

```

npm install -D prettier prettier-plugin-tailwindcss

```

Basic config:

in .vscode/settings.json

```json

{

  "[html]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode",

    "editor.formatOnSaveMode": "file"

  }

}

```

in .prettierrc.json, pretty much default settings with the pluggin and a larger print width., bracketSameLine false is better for vim users.

```json

{

  "plugins": ["prettier-plugin-tailwindcss"],

  "arrowParens": "always",

  "bracketSameLine": false,

  "bracketSpacing": true,

  "semi": true,

  "experimentalTernaries": false,

  "singleQuote": true,

  "jsxSingleQuote": false,

  "quoteProps": "as-needed",

  "trailingComma": "all",

  "singleAttributePerLine": false,

  "htmlWhitespaceSensitivity": "css",

  "vueIndentScriptAndStyle": false,

  "proseWrap": "preserve",

  "insertPragma": false,

  "printWidth": 120,

  "requirePragma": false,

  "tabWidth": 2,

  "useTabs": false,

  "embeddedLanguageFormatting": "auto"

}

```

in tailwind.config.js

```js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ['./src/**/*.{html,ts}'],

  theme: {

    extend: {},

  },

  plugins: ['prettier-plugin-tailwindcss'],

};

```

## Tailwind:

Just turn on prettier and typography, should be enough.

## UI libraries:

- Angular Material: `ng add @angular/material`

- Daisy UI `npm i -D daisyui@latest`

in tailwind.config.js

```json

  plugins: [

    require('daisyui'),

  ]

```

The material CDK is very powerful and enriches Daisy Ui with a lot of functionality if you need it

you don't need anything else for most projects.