Angular tips

Angular Slice 

https://github.com/angular/angular/issues/31622

today task is coming data should display reverseorder which latest created first one

use slice(0,-2) to remove last two digits

to change order of an array use reverse method

yourArray.reverse()

Change table row color in angular

ngclass based on the conditions of table index value

https://blog.angular-university.io/angular-2-ngfor/

need to write based on this examples

Angular Navigationbar

 there are different kind of navigation routing in angular.here i like to explain one of the routings

for ex: we have lefnavbar in that only selected navbar only active for that use below one

 ngOnInit(): void {

    this.activePage = this.activatedRoute.snapshot.url[0].path

    //this.id='1233433';

  }

  pageNavigate(tab) {debugger

    

    this.id=localStorage.getItem('checkOutData');

    if (tab === 'dashboard') {

      this.router.navigate(['/renew/'+this.id]);

    } else if (tab === 'profileupdate') {

      this.router.navigate(['/reissue']);

    } else if (tab === 'doctorconfig') {

      this.router.navigate(['/revoke']);

    } else if (tab === 'profileverify') {

      this.router.navigate(['/profileverify']);

    } else if (tab === 'appointmentList') {

      this.router.navigate(['/renew/2331433']);

    } else if (tab === 'patientList') {

      this.router.navigate(['/patientList']);

    } else if (tab === 'changepassword') {

      this.router.navigate(['/changepassword']);

    } else if (tab === 'login') {

      this.router.navigate(['/login']);

    }

    // this.appComponent.checkWebUrl(tab)

  }

}

html:

 <li id="" [ngClass]="{'active': activePage==='dashboard'}" (click) = "pageNavigate('dashboard')">

        <a routerLink="#"class="waves-effect waves-dark">

          <span class="pcoded-mtext">dashbaord</span>

        </a>

    </li>

Errores

 anchor tag with href # it will be redirect url in angular to change this using href

 <a href="javascript:void(0);" (click)='gotoStep1()'> <u> Edit Product </u></a>

like this

if remove href then it doesnot show click mouseover

main issue in angular

devops

 

Add Object to an array

 

add an object with key value to the an exixsting array here address is key and value move it to the an array

  myarray[0].Address = "123 Some St.";
   or
   
   myarray[0]["Address"] = "123 Some St.";

Control Value Accessor in Angular

 

 Implement Control Value Accessor methods

You’re going to need to implement the following methods and variables:

1. onChange → the callback function to register on UI change
2. onTouch → the callback function to register on element touch
3. set value(val: any) → sets the value used by the ngModel of the element
4. writeValue(value: any) → This will will write the value to the view if the the value changes occur on the model programmatically
5. registerOnChange(fn: any) → When the value in the UI is changed, this method will invoke a callback function
6. registerOnTouch(fn: any) → When the element is touched, this method will get called
   Heres the implementation:
   

   export class CustomInputComponent implements ControlValueAccessor {constructor() { }onChange: any = () => {}onTouch: any = () => {}val= "" // this is the updated value that the class accessesset value(val){  // this value is updated by programmatic changes if( val !== undefined && this.val !== val){this.val = valthis.onChange(val)this.onTouch(val)}}// this method sets the value programmaticallywriteValue(value: any){ this.value = value}// upon UI element value changes, this method gets triggeredregisterOnChange(fn: any){this.onChange = fn}// upon touching the element, this method gets triggeredregisterOnTouched(fn: any){this.onTouch = fn}}