Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Implement Event Update Functionality

Explore how to implement event update functionality by using Angular template-driven forms, integrating Google Maps Autocomplete, and adding validation with date comparisons. Understand component setup, form handling, and enhancing user experience with error and success messaging.

We'll cover the following...

Below is our updated code. Use this to make further changes.

�PNG


IHDR?�~�	pHYs��~�fIDATH��WKLQ���̔�uG��	e�n�.6qcb�l?���D`�F#�
Ku�F
1Qc�
��!����	��C�P�|B?$���ܱ3����I&}��}�̽s�[*�ɀU�A��K��yx�gY�Ajq��3L	Š���˫�OD�4��3Ϗ:X�3��o�PJ�ğo#IH�a����,{>1/�2$�R	AR]�)w��?�sZw^��q�Y�m_��e���r[8�^�
�&p��-���A}c��- ������!����2_)E�)㊪j���v�m��ZOi�g�nW�{<n8�P����o�=$8�K��9|$����@��v�P<�j�>�n.|�e2�a&�0aŸ����be�̀��C�fˤE%-{�ֺ��׮C��N��jXi�~c�C,t��T�����r�{� �L)s��V��6%�(�#ᤙ!�]��H�ҐH$R���^R�A�61(?Y舚�>���(Z����Qm�L2�K�ZIc��
���̧�C��2!⅄�(����"�Go��>�q��=��$%�z`ѯ��T�&����PHh�Z!=���z��O��������,*VVV�1�f*CJ�]EE��K�k��d�#5���`2yT!�}7���߈~�,���zs�����y�T��V������D��C2�G��@%̑72Y�޾{oJ�"@��^h�~��fĬ�!a�D��6���Ha|�3��� [>�����]7U2п���]�ė
��PU��.Wejq�in�g��+p<ߺQH����總j[������.���	Q���p _�K��1(��+��bB8�\ra
�́�v.l���(���ǽ�w���L��w�8�C��IEND�B`�
Implement event update functionality

Before continuing with the implementation for EventUpdateComponent, add an x to the describe of the test suite for EventUpdateComponent, similar to what we did for EventCreateComponent.

TypeScript 3.3.4
// src/app/event/event-update/event-update.component.spec.ts
xdescribe('EventUpdateComponent', () => {
  ...
});

Because the form we’ll create for this feature also relies on the same third-party libraries which directly manipulate the DOM, it makes them difficult to test at this level. Instead, we’ll rely on Cypress tests for this feature.

Update event module

Unlike EventCreateComponent, which used reactive forms, we’ll use template-driven forms for EventUpdateComponent.

  1. In EventModule, add FormsModule to the existing imports from @angular/forms.
  2. Add FormsModule to the imports array within NgModule.
TypeScript 3.3.4
// src/app/event/event.module.ts
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    CommonModule,
    EventRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    CommentCreateModule,
    MemberListModule,
    RecommendationsListModule
  ],
  declarations: [EventCreateComponent, EventViewComponent, EventUpdateComponent]
})

Update event-update component

With FormsModule now imported into EventModule, move on to the necessary imports for EventUpdateComponent.

TypeScript 3.3.4
// src/app/event/event-update/event-update.component.ts
import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  NgZone,
  ChangeDetectorRef
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MapsAPILoader } from '@agm/core';
import { isBefore } from 'date-fns';
declare var google: any;
import { AuthService } from '../../services/auth/auth.service';
import { EventsService } from '../../services/events/events.service';
import { Event } from '../../services/events/event';

Most imports here should look similar to the ones we imported for EventCreateComponent. Two new ones worth noting here are ChangeDetectorRef and isBefore.

  1. ChangeDetectorRef is similar to fixture.detectChanges(), which we’ve used in our component tests. We’ll need this to trigger Angular’s change detection before loading Google Maps Autocomplete. We’ll see why this is necessary shortly.

  2. The second is a method ...