Angular Quick Note

app.component

1. HTML
2. CSS/SCSS/SASS/LESS
3. SPEC for testing
4. Component for TS file

Understanding Components

• Template: The template defines the structure and appearance of the component’s UI. It uses HTML along
  with Angular-specific syntax to bind data, handle events, and render dynamic content.
• Class: The class contains the component’s logic and data. It is written in TypeScript and includes properties,
  methods, and lifecycle hooks.
• Metadata: The metadata is defined using decorators. It provides Angular with information about the
  component, such as its selector, template, styles, and dependencies.

Creating and using Components

• Use the Angular CLI to generate a new component

  ng generate component component-name

  shortcut

  ng g c component-name

Component Lifecycle

1. Constructor - constructor is running
2. OnChanges - ngOnChanges() in first time
3. OnInit - ngOnInit() called after the component has been initialized. Initializing logic for example: fetch data from database, or from API.
4. OnChanges - ngOnChanges() will run when one or more components input properties have changed, so it receives an object containing the previous and the current value of the input properties. It always listen to any changes that will happen to any properties of the component(s).
5. OnDestroy - ngOnDestroy() is called before the component is destroyed. It’s used to clean up resource and subscribe from observable or perform any necessary cleanup tasks, like remove or reset the data when the component gets destroyed.

Understanding Services

• In Angular, services are reusable and injectable classes that provide functionality and data to components throughout an application.
• Services are responsible for handling tasks such as data retrieval from APIs, sharing data between components, and performing business logic.
• Services are typically used to abstract away the implementation details of specific functionality, keeping the components lean and focused on their primary responsibilities. They help promote code reusability, modularity, and testability.

Creating and using Services

• Use the Angular CLI to generate a new component

  ng generate service service-name

  shortcut

  ng g s service-name

Dependency Injection

• Modularity: Dependencies can be managed and resolved independently, allowing for easier code organization and separation of concerns.
• Reusability: Services can be shared and reused across multiple components, reducing code duplication.
• Testability: Dependencies can be easily mocked or replaced during testing, enabling effective unit testing.
• Loose coupling: Components and services depend on abstractions (interfaces) rather than concrete implementations, resulting in loosely coupled code that is easier to maintain and modify.

Configuring Routes

• Angular’s routing module allows you to define and configure routes for different views or components in your application.
• Routing enables navigation between different pages or sections of your application without requiring a full page reload.

Router Outlet, Router Links, and Navigation

• The router-outlet directive is a placeholder that renders the component associated with the active route.

  <router-outlet></router-outlet>

• To navigate between routes, Angular provides the routerLink directive, which allows you to create links to different routes in your application.

  <a routerLink="/about">About</a> 
  <a [routerlink]="['/user', userid]">User Profile</a>

• To navigate programmatically in the component class, you can use the Router service provided by Angular’s router module.

  Import { Router } from '@angular/ router';
  
  @Component ({...})
  export class MyComponent {
    constructor (private router: Router) {}
  
    // custom function name
    navigateToAbout() {
      this.router.navigate(['/about'])
    }
  }