Null check condition with object of object in ngModel in HTML in Angular

 Null check condition with object of object in ngModel in HTML in Angular

[(ngModel)] = "kodingAttittude?.Employee && kodingAttitude?.Employee.Name"

<input formControlName="empName"

            [(ngModel)]="kodingAttitude?.Employee && kodingAttitude?.Employee.Name">

Custom Validator for Whitespace and Nextline in Textboxes in Angular

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

import { FormBuilder, FormGroup, AbstractControl, ValidationErrors, Validators } from '@angular/forms';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

 

  studentForm!: FormGroup;

 

  constructor(private formBuilder: FormBuilder){

   

  }

  ngOnInit(): void{

     this.studentForm = this.formBuilder.group({

        studentName: ['',[Validators.required, this.checkWhitespaceNextlineValidator()]],

        studentMarks: ['',[Validators.required, this.checkWhitespaceNextlineValidator()]]

     });

  }

  checkWhitespaceNextlineValidator(){

    return (control: AbstractControl): ValidationErrors | null => {

      const isNewline = control?.value?.replaceAll(/&lt;,*?&gt;/g, "")?.replaceAll(/<.*?>/g, "");

      const isWhitespace = (isNewline || '').trim().length === 0;

      return isWhitespace ? { whitespace: true } : null;

    }

  }

}

Restrict API Hitting Multiple times to 1 time on page load in Anuglar

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

import { ApiService } from '../services/api-service.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

 

  apiTimer: any;

 

  constructor(private apiservice: ApiService){

   

  }

  ngOnInit(): void{

     this.selectDropdown();

     this.searchClick();

  }

  selectDropdown() {

    if(!this.apiTimer){

      this.apiTimer = setTimeout(() => {

       this.getApiResult();

      }, 0);

      }

  }

  searchClick(){

    if(!this.apiTimer){

      this.apiTimer = setTimeout(() => {

       this.getApiResult();

      }, 0);

      }

  }

  getApiResult(){

    this.apiService.getApiResult(request: any).subscribe((data: any) => {

      this.result = data.result;

      if(this.apiTimer){

        this.apiTimer = undefined;

      }

    });

  }

 

}

to return the mock data from Observable in angular service

//to return the mock data from Observable in angular service

//Generic type 'Observer<T>' requires 1 type arguments(s).

getStudentSubjectDropdown(studentID: string): Observable<dropDownData[]> {

    //const params = new HttpParams().append('studentId', studentID);

    //return this.http.get<dropDownData[]>(this.rootURL + 'Student/StudentSubject', { params }).pipe(retry(3));

    let data: dropDownData[] = [

      {

        "id": "1001",

        "name": "Telugu",

        "description": "Telugu is First Language"

      },

      {

        "id": "1002",

        "name": "Hindi",

        "description": "Hindi is Second Language"

      },

      {

        "id": "1003",

        "name": "English",

        "description": "English is Third Language",

      },

      {

        "id": "1004",

        "name": "Mathematics",

        "description": "Maths is a subject"

      },

      {

        "id": "1005",

        "name": "Science",

        "description": "Science is a subject"

      },

      {

        "id": "1006",

        "name": "Social",

        "description": "Social is a subject"

      }

    ],

    return new Observable(( observer: Observer<dropDownData[]>) => {

    observer.next(data);

    observer.complete();

  });

} 

to return the mock data from Observable in angular service

 to return the mock data from Observable in angular service

Error Message: Generic type 'Observer<T> requires 1 type argument(s)

getDropdownData(request: string): Observable<DropdownData[]>{

const params = new HttpParams().append('request', request);

return this.http.get<DropdownData[]>(this.rootURL +'Home/DropdownData', { params });

let data: DropdownData[] = [

{

'label': 'Circle',

'Id': '10'

},

{

'label': 'Rectangle',

'Id': '20'

},

{

'label': 'Triangle',

'Id': '30'

},

{

'label': 'Pentagone',

'Id': '40'

}

];

return new Observable((observer: Observer<DropdownData[]>) => {

observer.next(data);

observer.complete();

});

}