Learn Front-End Development and Automated Testing with Angular/

...

/

Add Call to Event View

Add Call to Event View

Let's add the service call in the event view component to display the event.

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:

Please provide values for the following:
your_API_key
Not Specified...
�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.
Press + to interact
// 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
...