Learn Front-End Development and Automated Testing with Angular/

...

/

Comments Module and Component

Comments Module and Component

Let's add a comment module and component to create and display comments on the event's page.

We'll cover the following...

Now that our new service is ready to be consumed, we can move on to the feature module for creating comments. First, we’ll create our new module and component.

ng g module comment-create
ng g component comment-create
Terminal 1
Terminal
Loading...

The first command ng g module comment-create, creates one file:

CREATE src/app/comment-create/comment-create.module.ts

The second command ng g component comment-create creates four files and updates one:

CREATE src/app/comment-create/comment-create.component.css
CREATE src/app/comment-create/comment-create.component.html
CREATE src/app/comment-create/comment-create.component.spec.ts
CREATE src/app/comment-create/comment-create.component.ts
UPDATE src/app/comment-create/comment-create.module.ts

Below is the updated code after running the above commands. 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`�
Comments module and component

It’s worth noting that we don’t add the --routing flag here. This is a module that will be used within another module, EventModule. It won’t have its own separate route so there’s no need to create a routing module for it.

Update create comment module

Update the module imports within CommentCreateModule as follows:

  1. Add FormsModule since we’ll be providing users an input to submit comments.
Press + to interact
// src/app/comment-create/comment-create.module.ts
import { FormsModule } from '@angular/forms';

  1. Update NgModule as mentioned below.

...