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

Add Call to Event View

Explore how to use Angular's ActivatedRoute to extract event ID from the URL and display event details. Learn to format dates with date-fns for a readable event view. Understand component setup, data subscription, and testing enhancements to improve user experience.

We'll cover the following...

Now that our service method is ready, let’s use this service in our component to display event details.

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`�
Add call to event view

Display event details

We can add it to EventViewComponent using the following steps:

  1. Add our imports.
TypeScript 3.3.4
// src/app/event/event-view/event-view.component.ts
import { ActivatedRoute } from '@angular/router';
import { EventsService } from '../../services/events/events.service';
import { Event } from '../../services/events/event';

ActivatedRoute is a new import. ActivatedRoute allows us to get the event ID from the URL that we’ll need to make our request.

  1. Inject our dependencies into our component’s constructor. Add ActivatedRoute and EventsService to our component’s constructor and add event and eventId
...