You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For property bindings and change detection theories, check [these blogs](https://blog.angularindepth.com/these-5-articles-will-make-you-an-angular-change-detection-expert-ed530d28930).
8
+
9
+
Simply, follow the following rules:
10
+
11
+
- Use `constructor()` only for dependency injection.
12
+
- Use `ngOninit()` to initialize data-bound properties.
13
+
- Use `ngAfterViewInit()` when you need to do something after the component view is initialized. The `@ViewChild` fields are initialized when this hook is called.
14
+
- Use `ngDestroy()` to clear resources such as unsubscribing from observables.
15
+
- Use asynchronous methods to update properties and know the `NgZone` concept to avoid the `ExpressionChangedAfterItHasBeenCheckedError` error.
6
16
7
-
As hinted by the offical Angular document, use the new Reactive Form, not Template Form. Template forms are asynchornous and event-driven. They are also not as flexible as reactive forms. Reactive fomrs have the following benefits:
17
+
## Forms
8
18
9
-
- Synchronous form controls are easier to unit test
10
-
- Forms and models are closely aligned
11
-
- Group form controls together at different levels using group and array.
12
-
- Validate form controls at any level and dynamically
19
+
Only use the reactive Form, not Template Form. Template forms are asynchornous and event-driven. They are also not as flexible as reactive forms.
13
20
14
-
Use the following style to create a form:
21
+
For most simple scenarios, use `FormBuilder`to create a form. For a complicated form, create `FormGroup` and `FormControl` directly.
15
22
16
23
```ts
17
24
constructor(privateformBuilder: FormBuilder) {}
@@ -25,12 +32,16 @@ createForm() {
25
32
}
26
33
```
27
34
28
-
For most simple scenarios, use `FormBuilder` to create a form. For a complicated form, create `FormGroup` and `FormControl` directly.
- Use `providedIn: 'root'` for services which should be available in whole application as singletons.
33
-
- Never use `providedIn: EagerlyImportedModule`, you don’t need it and if there is some super exceptional use case then go with the `providers: []` instead.
34
-
- Use `providedIn: LazyServiceModule` to prevent service injection in the eagerly imported part of the application. Use `LazyServiceModule` which will be imported by `LazyModule` to prevent circular dependency warning. LazyModule will then be lazy loaded using Angular Router for some route in a standard fashion. This is not recommended for too much confusing code.
35
-
- Use `providers: []` inside of `@Component` or `@Directive` to scope service only for the particular component sub-tree which will also lead to creation of multiple service instances (one service instance per one component usage)
36
-
- Always try to scope your services conservatively to prevent dependency creep and resulting tangled hell
45
+
- Use `providedIn: 'root'` for all services which should be available as singletons.
46
+
- Use file structure to scope services. A module can only use services that are in its subfoler or share the same parent folder.
47
+
- Use `providers: []` for services that 1) need initialization (such as `myService.forRoot()`) or 2) inside `@Component` or `@Directive` for scoped mulitple-instance services.
0 commit comments