New Ionic 5 Angular 8 Display, Update and Delete Records with RxJS

This post is about displaying the API records with delete and update actions using new Ionic and Angular reactive programming. This is a continuation of Ionic Angular series and it explains to you how to distribute the data between the components using RxJS method like BehaviorSubject. All of the feed API responses/records storing in a reactive object, This help the application DOM works seamlessly with update and delete operations. Implement this to your side project and enrich your applications.

New Ionic 5 Angular 8 Update and Delete Records with RxJS

Live Demo
Video Tutorial
[embedded content] Feed Service Create a Feed service for maintaining all of the data operations like display, update and delete <div class="code">new-ionic-angular$ ionic g s services/feed > ng generate service services/feed CREATE src/app/services/feed.service.spec.ts (323 bytes) CREATE src/app/services/feed.service.ts (133 bytes) [OK] Generated service!</div> feed.service.ts Here feedData method connects with API. feedData$ is a behavior subject RxJS reactive storage object, this helps you distribute the data between the components. changeFeedData method updates the reactive object value using next(). <div class="codeDark"> <div> <div>import { Injectable } from ‘@angular/core’;</div> <div>import { BehaviorSubject, Observable } from ‘rxjs’;</div> <div>import { HttpService } from ‘./http.service’;</div> <div>@Injectable({</div> <div>  providedIn: ‘root’</div> <div>export class FeedService {</div> <div>  feedData$ = new BehaviorSubject<any>([]);</div> <div>  constructor(private httpService: HttpService) {}</div> <div>  changeFeedData(data: any) {</div> <div>    this.feedData$.next(data);</div> <div>  feedData(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feed’, postData);</div> </div> </div> Feed Page – feed.page.ts Import the Feed service and on page initiate(ngOnInit) make the feed API call to get the records. Construct the postData object with login user id and token values. Storing the API results in feedData$ reactive object using feedService.changeFeedData method. <div class="codeDark"> <div> <div>import { Component, OnInit } from ‘@angular/core’;</div> <div>import { FeedService } from ‘src/app/services/feed.service’;</div> <div>import { AuthService } from ‘./../../services/auth.service’;</div> <div>import { ToastService } from ‘./../../services/toast.service’;</div> <div>@Component({</div> <div>  selector: ‘app-feed’,</div> <div>  templateUrl: ‘./feed.page.html’,</div> <div>  styleUrls: [‘./feed.page.scss’]</div> <div>export class FeedPage implements OnInit {</div> <div>  public authUser: any;</div> <div>  postData = {</div> <div>    user_id: ”,</div> <div>    token: ”</div> <div>  constructor(</div> <div>    private auth: AuthService,</div> <div>    private feedSerive: FeedService,</div> <div>    private toastService: ToastService</div> <div>  ngOnInit() {</div> <div>    this.auth.userData$.subscribe((res: any) => {</div> <div>      this.authUser = res; this.getFeedData();</div> <div>    });</div> <div>  getFeedData() {</div> <div>    this.postData.user_id = this.authUser.uid;</div> <div>    this.postData.token = this.authUser.token;</div> <div>    if (this.postData.user_id && this.postData.token) {</div> <div>      this.feedSerive.feedData(this.postData).subscribe(</div> <div>        (res: any) => {</div> <div>          this.feedSerive.changeFeedData(res.feedData);</div> <div>        },</div> <div>        (error: any) => {</div> <div>          this.toastService.presentToast(‘Network Issue.’);</div> <div>        }</div> <div>      );</div> </div> </div> Display Data Generate a component for displaying feed records. <div class="code">$ ionic g c components/feedCard > ng generate component components/feedCard CREATE src/app/components/feed-card/feed-card.component.scss (0 bytes) CREATE src/app/components/feed-card/feed-card.component.html (28 bytes) CREATE src/app/components/feed-card/feed-card.component.spec.ts (741 bytes) CREATE src/app/components/feed-card/feed-card.component.ts (279 bytes) [OK] Generated component!</div> components.module.ts Declare and export the module for application use. <div class="codeDark">import { CommonModule } from ‘@angular/common’; <div> <div>import { NgModule } from ‘@angular/core’;</div> <div>import { FormsModule } from ‘@angular/forms’;</div> <div>import { IonicModule } from ‘@ionic/angular’;</div> <div>import { FeedCardComponent } from ‘./feed-card/feed-card.component’;</div> <div>import { SlidesComponent } from ‘./slides/slides.component’;</div> <div>import { StartButtonComponent } from ‘./start-button/start-button.component’;</div> <div>@NgModule({</div> <div>  declarations: [SlidesComponent, StartButtonComponent, FeedCardComponent],</div> <div>  exports: [SlidesComponent, StartButtonComponent, FeedCardComponent],</div> <div>  imports: [CommonModule, FormsModule, IonicModule]</div> <div>export class ComponentsModule {}</div> </div> </div> feed.moudle.ts Import the components module for accessing the components. <div class="codeDark">aimport { CommonModule } from ‘@angular/common’; <div> <div>import { NgModule } from ‘@angular/core’;</div> <div>import { FormsModule } from ‘@angular/forms’;</div> <div>import { RouterModule, Routes } from ‘@angular/router’;</div> <div>import { IonicModule } from ‘@ionic/angular’;</div> <div>import { ComponentsModule } from ‘./../../components/components.module’;</div> <div>import { FeedPage } from ‘./feed.page’;</div> <div>const routes: Routes = [</div> <div>    path: ”,</div> <div>    component: FeedPage</div> <div>@NgModule({</div> <div>  imports: [</div> <div>    CommonModule,</div> <div>    ComponentsModule,</div> <div>    FormsModule,</div> <div>    IonicModule,</div> <div>    RouterModule.forChild(routes)</div> <div>  declarations: [FeedPage]</div> <div>export class FeedPageModule {}</div> </div> </div> feed.page.html Include the feedCard(app-feed-card) component in feed page. <div class="codeDark"><ion-header> <div> <div>  <ion-toolbar></div> <div>    <ion-title>Feed</ion-title></div> <div>  </ion-toolbar></div> <div></ion-header></div> <div><ion-content></div> <div>  <ion-item></div> <div>    <h2> Welcome to </h2></div> <div>  </ion-item></div> <div>  <app-feed-card></app-feed-card></div> </div> </ion-content> </div> feed-card.component.html Design with ionic components. <div class="codeDark"><ion-card> <div> <div>    <ion-card-content></div> <div>      feed content</div> <div>    </ion-card-content></div> <div>  </ion-card></div> </div> </div> Display Records from Reactive Object feed-card.component.ts Subscribe the feedData$ objects for feed records. <div class="codeDark">import { Component, OnInit } from ‘@angular/core’; <div> <div>import { FeedService } from ‘./../../services/feed.service’;</div> <div>@Component({</div> <div>  selector: ‘app-feed-card’,</div> <div>  templateUrl: ‘./feed-card.component.html’,</div> <div>  styleUrls: [‘./feed-card.component.scss’]</div> <div>export class FeedCardComponent implements OnInit {</div> <div>  feedData: any;</div> <div>  constructor(private feedSerivce: FeedService) {}</div> <div>  ngOnInit() {</div> <div>    this.feedSerivce.feedData$.subscribe((res: any) => {</div> <div>      this.feedData = res;</div> <div>    });</div> </div> </div> feed-card.component.html Bind with HTML and iterate the feed data. <div class="codeDark"><ion-card *ngFor=“let feed of feedData; let i = index”> <div> <div>    <ion-card-content [innerHTML]=“feed.feed”></div> <div>      </div> <div>    </ion-card-content></div> <div>  </ion-card></div> </div> </div> Delete Records Alert Service Generate the alert service for confirming the record delete action. <div class="code">new-ionic-angular$ ionic g s services/alert > ng generate  service services/alert CREATE src/app/services/alert.service.spec.ts (328 bytes) CREATE src/app/services/alert.service.ts (134 bytes) [OK] Generated service!</div> alert.service.ts Import the ionic component and modify the presentAlertConfirm method with dynamic inputs. This way you can reuse for other actions. <div class="codeDark">import { Injectable } from ‘@angular/core’; <div> <div>import { AlertController } from ‘@ionic/angular’;</div> <div>@Injectable({</div> <div>  providedIn: ‘root’</div> <div>export class AlertService {</div> <div>  constructor(public alertController: AlertController) {}</div> <div>  async presentAlertConfirm(header: string, message: string) {</div> <div>    let choice;</div> <div>    const alert = await this.alertController.create({</div> <div>      header: header,</div> <div>      message: message,</div> <div>      buttons: [</div> <div>        {</div> <div>          text: ‘Cancel’,</div> <div>          role: ‘cancel’</div> <div>        },</div> <div>        {</div> <div>          text: ‘Okay’,</div> <div>          role: ‘okay’</div> <div>        }</div> <div>      ]</div> <div>    });</div> <div>    await alert.present();</div> <div>    await alert.onDidDismiss().then(data => {</div> <div>      choice = data;</div> <div>    });</div> <div>    return choice;</div> </div> </div> feed.service.ts Now include the feedDelete API post request method. Here deleteFeedData method remove the object from the reactive object feedData$ <div class="codeDark">import { Injectable } from ‘@angular/core’; <div> <div>import { BehaviorSubject, Observable } from ‘rxjs’;</div> <div>import { HttpService } from ‘./http.service’;</div> <div>@Injectable({</div> <div>  providedIn: ‘root’</div> <div>export class FeedService {</div> <div>  feedData$ = new BehaviorSubject<any>([]);</div> <div>  constructor(private httpService: HttpService) {}</div> <div>  changeFeedData(data: any) {</div> <div>    this.feedData$.next(data);</div> <div>  getCurrentFeedData() {</div> <div>    return this.feedData$.getValue();</div> <div>  deleteFeedData(msgIndex: number) {</div> <div>    let data = [];</div> <div>    let currentFeedData = this.getCurrentFeedData();</div> <div>    currentFeedData.splice(msgIndex, 1);</div> <div>    let newFeedUpdateData = data.concat(currentFeedData);</div> <div>    this.changeFeedData(newFeedUpdateData);</div> <div>  feedData(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feed’, postData);</div> <div>  feedDelete(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feedDelete’, postData);</div> </div> </div> feed-card.components.ts Create a feedDeleteAction and connect with feedDelete API with alert confirm action. Then delete the record from the behavior subject. <div class="codeDark">import { Component, Input, OnInit } from ‘@angular/core’; <div> <div>import { AlertService } from ‘./../../services/alert.service’;</div> <div>import { FeedService } from ‘./../../services/feed.service’;</div> <div>@Component({</div> <div>  selector: ‘app-feed-card’,</div> <div>  templateUrl: ‘./feed-card.component.html’,</div> <div>  styleUrls: [‘./feed-card.component.scss’]</div> <div>export class FeedCardComponent implements OnInit {</div> <div>  @Input() loginUser: any;</div> <div>  feedData: any;</div> <div>  postData = {</div> <div>    user_id: ”,</div> <div>    token: ”</div> <div>  constructor(</div> <div>    private feedSerivce: FeedService,</div> <div>    private alertSerivce: AlertService</div> <div>  ngOnInit() {</div> <div>    this.feedSerivce.feedData$.subscribe((res: any) => {</div> <div>      this.feedData = res;</div> <div>    });</div> <div>  feedDeleteAction(msgIndex: number) { <div>    this.postData.user_id = this.loginUser.user_id;</div> <div>    this.postData.token = this.loginUser.token;</div> </div> <div>    this.alertSerivce</div> <div>      .presentAlertConfirm(‘Delete feed’, ‘Do you want to delete this feed?’)</div> <div>      .then((res: any) => {</div> <div>        if (res.role === ‘okay’) {</div> <div>          this.feedSerivce.feedDelete(this.postData).subscribe((res: any) => {</div> <div>            if (res.success) {</div> <div>              this.feedSerivce.deleteFeedData(msgIndex);</div> <div>            }</div> <div>          });</div> <div>        }</div> <div>      });</div> </div> </div> feed-card.components.html Bind the action with delete button. <div class="codeDark"><ion-card *ngFor=“let feed of feedData; let i = index”> <div> <div>  <ion-card-content></div> <div>    <button (click)=“feedDeleteAction(i)” class=“right”></div> <div>      <ion-icon name=“trash”></ion-icon></div> <div>    </button></div> <div>    <p [innerHTML]=“feed.feed”></p></div> <div>  </ion-card-content></div> </div> </ion-card> </div> Update Feed feed.server.ts Add methods for feedUpdate to connect RESTful API. Push the feed data using updateFeedData(). <div class="codeDark">import { Injectable } from ‘@angular/core’; <div> <div>import { BehaviorSubject, Observable } from ‘rxjs’;</div> <div>import { HttpService } from ‘./http.service’;</div> <div>@Injectable({</div> <div>  providedIn: ‘root’</div> <div>export class FeedService {</div> <div>  feedData$ = new BehaviorSubject<any>([]);</div> <div>  constructor(private httpService: HttpService) {}</div> <div>  changeFeedData(data: any) {</div> <div>    this.feedData$.next(data);</div> <div>  getCurrentFeedData() {</div> <div>    return this.feedData$.getValue();</div> <div>  updateFeedData(newFeed: any) {</div> <div>    let data = [];</div> <div>    data.push(newFeed);</div> <div>    let currentFeedData = this.getCurrentFeedData();</div> <div>    let newFeedUpdateData = data.concat(currentFeedData);</div> <div>    this.changeFeedData(newFeedUpdateData);</div> <div>  deleteFeedData(msgIndex: number) {</div> <div>    let data = [];</div> <div>    let currentFeedData = this.getCurrentFeedData();</div> <div>    currentFeedData.splice(msgIndex, 1);</div> <div>    let newFeedUpdateData = data.concat(currentFeedData);</div> <div>    this.changeFeedData(newFeedUpdateData);</div> <div>  feedData(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feed’, postData);</div> <div>  feedDelete(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feedDelete’, postData);</div> <div>  feedUpdate(postData: any): Observable<any> {</div> <div>    return this.httpService.post(‘feedUpdate’, postData);</div> </div> </div> Feed Update Component Generate a component for feed update operations. <div class="code">new-ionic-angular$ ionic g c components/feed-update > ng generate  component components/feed-update CREATE src/app/components/feed-update/feed-update.component.scss (0 bytes) CREATE src/app/components/feed-update/feed-update.component.html (30 bytes) CREATE src/app/components/feed-update/feed-update.component.spec.ts (755 bytes) CREATE src/app/components/feed-update/feed-update.component.ts (287 bytes) [OK] Generated component! </div> feed-update.component.ts Import the feed service and follow the same like feedDelete action. Construct the postData value with text <div class="codeDark">aimport { Component, Input, OnInit } from ‘@angular/core’; <div> <div>import { FeedService } from ‘./../../services/feed.service’;</div> <div>@Component({</div> <div>  selector: ‘app-feed-update’,</div> <div>  templateUrl: ‘./feed-update.component.html’,</div> <div>  styleUrls: [‘./feed-update.component.scss’]</div> <div>export class FeedUpdateComponent implements OnInit {</div> <div>  @Input() loginUser: any;</div> <div>  public postData = {</div> <div>    feed: ”,</div> <div>    feed_id: ”,</div> <div>    lastCreated: ”,</div> <div>    token: ”,</div> <div>    user_id: ”</div> <div>  constructor(private feedService: FeedService) {}</div> <div>  ngOnInit() {}</div> <div>  feedUpdateAction() {</div> <div>    if (this.postData.feed.length > 0) {</div> <div>      this.postData.lastCreated = ”;</div> <div>      this.postData.user_id = this.loginUser.user_id;</div> <div>      this.postData.token = this.loginUser.token;</div> <div>      this.feedService.feedUpdate(this.postData).subscribe((res: any) => {</div> <div>        this.postData.feed = ”;</div> <div>        this.feedService.updateFeedData(res.feedData);</div> <div>      });</div> </div> </div> feed-update.component.html Bind the postData value with ion-textarea. Connect the feedUpdateAction with update button. <div class="codeDark"><ion-item> <div> <div>  <ion-textarea placeholder=“Enter more information here…” [(ngModel)]=“postData.feed”></ion-textarea></div> <div></ion-item></div> <div><ion-item></div> <div>  <ion-button color=‘mango’ item-end (click)=“feedUpdateAction()”>Update</ion-button></div> </div> </ion-item>a </div> Timeago Install the Time Ago pipe. <div class="code">$npm install time-ago-pipe –save</div> Create web component for timego. <div class="code">new-ionic-angular$ ionic g c components/timeago > ng generate  component components/timeago CREATE src/app/components/timeago/timeago.component.scss (0 bytes) CREATE src/app/components/timeago/timeago.component.html (26 bytes) CREATE src/app/components/timeago/timeago.component.spec.ts (733 bytes) CREATE src/app/components/timeago/timeago.component.ts (272 bytes) [OK] Generated component!</div> components.module.ts Import all of the newly generated components feedUpdate, timeAgo and TimeAgoPipe. <div class="codeDark">import { CommonModule } from ‘@angular/common’; <div> <div>import { NgModule } from ‘@angular/core’;</div> <div>import { FormsModule } from ‘@angular/forms’;</div> <div>import { IonicModule } from ‘@ionic/angular’;</div> <div>import { TimeAgoPipe } from ‘time-ago-pipe’;</div> <div>import { FeedCardComponent } from ‘./feed-card/feed-card.component’;</div> <div>import { FeedUpdateComponent } from ‘./feed-update/feed-update.component’;</div> <div>import { SlidesComponent } from ‘./slides/slides.component’;</div> <div>import { StartButtonComponent } from ‘./start-button/start-button.component’;</div> <div>import { TimeagoComponent } from ‘./timeago/timeago.component’;</div> <div>@NgModule({</div> <div>  declarations: [</div> <div>    SlidesComponent,</div> <div>    StartButtonComponent,</div> <div>    FeedCardComponent,</div> <div>    FeedUpdateComponent,</div> <div>    TimeagoComponent,</div> <div>    TimeAgoPipe</div> <div>  exports: [</div> <div>    SlidesComponent,</div> <div>    StartButtonComponent,</div> <div>    FeedCardComponent,</div> <div>    FeedUpdateComponent,</div> <div>    TimeagoComponent</div> <div>  imports: [CommonModule, FormsModule, IonicModule]</div> <div>export class ComponentsModule {}</div> </div> </div> timeago.component.ts Using @input retrieve the created value from the feed loop. Convert the Unix timestamp to date format. <div class="codeDark">aimport { Component, OnInit, Input } from ‘@angular/core’; <div> <div>@Component({</div> <div>  selector: ‘app-timeago’,</div> <div>  templateUrl: ‘./timeago.component.html’,</div> <div>  styleUrls: [‘./timeago.component.scss’],</div> <div>export class TimeagoComponent implements OnInit {</div> <div> @Input() created: any;</div> <div> newTime: any;</div> <div>  constructor() { }</div> <div>  ngOnInit() {</div> <div>    this.newTime = this.converTime(this.created);;</div> <div>  converTime(time: any) {</div> <div>    let a = new Date(time * 1000);</div> <div>    return a;</div> </div> </div> timeago.component.html Apply the timeAgo pipe. <div class="codeDark"><div> <div> <div>  </div> </div> </div> </div> feed-card.component.html Now connect the app-timeago component with HTML. <div class="codeDark"><ion-card *ngFor=“let feed of feedData; let i = index”> <div> <div>  <ion-card-content></div> <div>    <button (click)=“feedDeleteAction(i, feed.feed_id)” class=“right”></div> <div>      <ion-icon name=“trash”></ion-icon></div> <div>    </button></div> <div>    <p [innerHTML]=“feed.feed”></p></div> <div>    <app-timeago [created]=“feed.created”></app-timeago></div> <div>  </ion-card-content></div> </div> </ion-card> </div> Building a Mobile Application You have to create a production build for generating mobile applications. Production Build <div class="code">$ ionic build –prod</div> Build iOS App Following commands for executing Xcode build, watch the video tutorial you will understand more. <div class="code">$ npm run ios-add $ npm run ios-open</div> Build Android App Open Android build using Android SDK <div class="code">$ npm run android-add $ npm run android-open</div> Project Updates If you want to update your project changes. <div class="code">$ npm run ios-copy $ npm run android-copy</div>

Recent Posts

Sunday

New Ionic 5 Angular 8 Display, Update and Delete Records with RxJS

No comments:

Post a Comment

Follow Us

Facebook

Recent

Comments

Gadget

Blog Archive

Tags

Recent Post

Recent News

Popular

Recent Posts

Sunday

New Ionic 5 Angular 8 Display, Update and Delete Records with RxJS

Related Posts:

No comments:

Post a Comment

Follow Us

Facebook

Recent

Comments

Gadget

Blog Archive

Tags

Recent Post

Recent News

Popular