Dynamic update in Angular

  angular, javascript, typescript

I’m finishing to create a contactlist app using Angular Bootstrap. How it must to work: on initialation it fecthing data and save it in localstorage. User can edit some data and save it on the screen without put on server. But how can get an auto update data

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

export class Contact {
  constructor(
    public name: any,
    public username: any,
    public email: any,
    public phone: any,
    public website: any
  ) {}
}

@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {
 
  contacts: Contact[] = [];
  editForm!: FormGroup;
  patchValue!: void;
  closeResult!: string;
  contact!: Contact;

  constructor(
    private httpClient: HttpClient,
    private fb: FormBuilder,
    private modalService: NgbModal
  ) { }

  ngOnInit(): void {
    this.contacts = [];
    this.getContacts();
    this.editForm = this.fb.group({
      name: [''],
      username: [''],
      email: [''],
      phone: [''],
      website: ['']
    });
  }

  getContacts() {
    this.httpClient.get<Contact[]>('https://demo.sibers.com/users').subscribe(
      response => {
        console.log(response);
        this.contacts = response;
        localStorage.setItem('contacts', JSON.stringify(this.contacts));
      }
    );
  }
  

  openEdit(targetModal:any, contact:Contact) {
    this.modalService.open(targetModal, {
      centered: true,
      backdrop: 'static',
      size: 'lg'
    });
    this.editForm.patchValue({
      name: contact.name,
      username: contact.username,
      email: contact.email,
      phone: contact.phone,
      website: contact.website
    });

  
  }
  open(contentEdit: any) {
    this.modalService.open(contentEdit, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }


}

? Creating one more function to save new data? Or something else?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.