debugmodedotnet

// There are four types of databibding in Angular

// Interpolation  - one way data binding - data flows from component to view ={{data}} Display data 

// Property Binding - one way data binding - data flows from component to view = [property]="data"  Set element property value

// event binding - one way data binding - data flows from view to component = (event)="expression"  Respond to user events

// two way data binding - two way data binding - data flows from component to view and view to component = [(ngModel)]="data"  Respond to user events and update properties

debugmodedotnet

import { Component, HostListener, OnInit, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  count = 0;

debugmodedotnet

import { Injectable } from '@angular/core';
import { RootInjectorGuard } from './root-injector.guard';

@Injectable({
  providedIn: 'root'
})
export class AppService extends RootInjectorGuard  {

  constructor() { 
    super(AppService)

debugmodedotnet

import { inject, InjectOptions, Type } from "@angular/core";

export class RootInjectorGuard {
    option: InjectOptions = {
        skipSelf: true,
        optional: true
    };
    constructor(type: Type<any>) {
        console.log(type.name);
        const parent = inject(type, this.option);

debugmodedotnet

@Component({
  selector: 'app-fipq',
  templateUrl: './fipq.component.html',
  styleUrls: ['./fipq.component.css'],
  providers: [AppService]
})
export class ProductComponent implements OnInit {

  constructor(private appservice: AppService) { }

debugmodedotnet

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppService {

  constructor() { }
}

debugmodedotnet

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';

debugmodedotnet

const products : IProductDetails[] = [
 {
  product:{
      Id: 1,
      Title: 'Pen',
      Price: 100
    },
    inStock:true,
    Qyanity: 100,
    Color: "Red",

debugmodedotnet

function Product(title,price){
  this.title = title; 
  this.price = price; 
  console.log(this); 
}


// call a function as method   - MIP   
// value of this inside function - always object before dot

debugmodedotnet

  let c1 = data.findIndex( t => Object.keys(t)[0] == d.type);
     if(c1 > -1){
          if(data[c1][d.type].length >1){
              const index = data[c1][d.type].indexOf(d.title); 
              if (index > -1) {
                        data[c1][d.type].splice(index, 1);
                }
          }
          else{
             const index = data[c1][d.type].indexOf(d.title);