Editing Angular (section)

===Components===
Every Angular application has at least one '''component''', the '''root''' (top level) '''component''' that connects a component hierarchy (component tree) with the page document object model (DOM). A component controls a patch of screen called a view. Each component defines a '''selector''', a class that contains application data and logic (view logic), and is associated with an HTML template that defines a view to be displayed in a target environment (see [[Angular#Own_Components|@Component]]).

====Root Component====
* see <code><APP_ROOT_DIR>\src\app.component.*</code>
* change title in <code>app.component.ts</code>

====Own Components====
A component instance has a [https://angular.io/guide/lifecycle-hooks lifecycle] that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM.

 '''@Component({'''  // from angular core
   '''selector:''' '<SELECTOR>', // tag name within html
   '''templateUrl:''' '<PATH_FILENAME>', // path and filename of the corresponding template
   '''template:''' '<HTML_CODE>', // e.g. &lt;h1>&#123;&#123;title}}&lt;/h1>
   '''styleUrls:''' // the styles only apply to the component
 '''})'''
 '''export class''' <COMPONENT_CLASS> ['''implements OnInit'''] '''{'''
   ['''ngOnInit() {''' // is called shortly after creating a component
   '''}''']
 '''}'''

In addition each component needs to be declared in a module, normally in <code>@NgModule ... AppModule</code>

Components use '''[[Angular#Services|services]]'''.

====Parent/Child Component Relation====
A parent child relation is established by using the selector of the child component in the template of the parent component.

====Templates====
The metadata for a component class associates it with a '''template''' that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display. The metadata for a service class provides the information Angular needs to make it available to components through '''dependency injection''' (DI).

 {{<PROPERTY>}}  // data binding to property of component class
 {{<OBJECT>.<PROPERTY>}}
 &#123;{todo.targetDate}} | date // pipes are date, lowercase, uppercase, ...
 (<EVENT>)=<METHOD> // event binding
 [(ngModel)]="<PROPERTY_NAME>" // two-way data and event binding, for piping it has to be split into [ngModel]="... | <PIPE>" and (ngModel)
 <a routerLink="/todos">here</a> // router link
 [[Angular#Build-In_Directives|Directives]]

Two-way binding notation '[()]' is also called banana-in-the-box.

=====Template Variables=====
'''Template Variables''' are defined by the prefix <code>#<NAME></code>. They can be referenced e.g. in the template in Typescript code e.g.
 ... <button type="button" (click)="callPhone(<NAME>.value)">Call</button> ...

* [https://angular.io/guide/template-reference-variables documentation]

=====Template Input Variables=====
The '''let''' keyword declares a template input variable that you can reference within the template e.g.
 // see bookmarks.component.html
 <ng-template matMenuContent let-subMenuIndex="subMenuIndex">
   <button mat-menu-item (click)="onViewMenu(subMenuIndex)">View Menu</button>

=====ng-template=====
With <code><ng-template></code> you can define template content that is only being rendered by Angular when you, whether directly or indirectly.

=====Standard Events=====
* click
* dblclick
* focus
* blur
* submit
* scroll
* cut
* copy
* paste
* keydown
* keypress
* keyup
* mouseenter
* mousedown
* mouseup
* drag
* dragover
* drop

=====Custom Events=====
* sending custom events from child to parent
 @Component ...
 export class ... {
   @Output() public <EVENT_NAME> = new EventEmitter['''<'''<EVENT_TYPE>'''>'''](); // from @angular/core
   ...
   <METHOD>() {
      this.<EVENT_NAME>.emit([<VARIABLE_OF_EVENT_TYPE>]);

* catching event in parent in parent HTML file:
 '''<'''<COMPONENT_SELECTOR> (<EVENT_NAME>)="&lt;CODE>"'''>''' '''</'''<COMPONENT_SELECTOR>'''>'''

=====Structural Directives=====
'''Structural directives''' are directives which change the DOM layout by adding and removing DOM elements. They are generally are prefixed by an asterisk, <code>*</code>.

=====Build-In Directives=====
* [ngClass] // to set a style via a class
* [ngStyle] // to set inline styles
* [(ngModel)] // to bind properties
* [ngIf] 
 *ngIf='<PROPERTY_NAME>' // shows tag only if property is true
* [ngFor]
 '''*ngFor="let''' todo '''of''' todos"
* [ngSwitch]
* <ng-container>

====Communication and Passing Data between Components====
* see http://dev-reboot.com/share-data/
=====Parent to Child Communication=====
* create an input class property in the child component or use the input array of the @Component decorator e.g.
 @Input() myProperty: number
 
 @Component({
   selector: 'child-component',
   inputs: ['count'], 
   ...
* and in the parent component template e.g.
 <child-component [myProperty]=value></child-component>
* if needed react on changes (see [https://www.tektutorialshub.com/angular/angular-passing-data-child-component/ here])

=====Child to Parent Communication=====,
* see [https://www.tektutorialshub.com/angular/angular-component-communication-sharing-data/ here] (e.g. by Events, Output decorator, ViewChild(), ...)