Ionic - jellyfish-tom/TIL GitHub Wiki

Ionic component lifecycle:

Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.

• ionViewLoaded - Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewLoaded event is good place to put your setup code for the page.
• ionViewWillEnter - Runs when the page is about to enter and become the active page.
• ionViewDidEnter - Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
• ionViewWillLeave - Runs when the page is about to leave and no longer be the active page.
• ionViewDidLeave - Runs when the page has finished leaving and is no longer the active page.
• ionViewWillUnload - Runs when the page is about to be destroyed and have its elements removed.
• ionViewDidUnload - Runs after the page has been destroyed and its elements have been removed.

=====================

https://code-maze.com/angular-best-practices/

• architecture and steps how to create module/page/service etc.
  • https://angular.io/guide/architecture
• ng methods inside HTMLs and whole logic around that
• data binding in angular
• how to compose views? modularize components:
  • https://github.com/smukov/AvI/wiki/Ionic_Creating-Reusable-Layouts
  • https://blog.angular-university.io/angular-viewchild/

@ViewChild

With @ViewChild, we can inject any component or directive (or HTML element) present on the template of a given component onto the component itself.

If we want to write component initialization code that uses the references injected by @ViewChild, we need to do it inside the AfterViewInit lifecycle hook.

    export class AppComponent implements  AfterViewInit {
      .....
    
      @ViewChild(ColorSampleComponent)
      primarySampleComponent: ColorSampleComponent;

      ngAfterViewInit() {
        console.log('Values on ngAfterViewInit():');
        console.log("primaryColorSample:", this.primarySampleComponent);
      }  
      .....
    }

• best practices in ionic/angular