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

Comments Module and Component

Explore how to create a comment feature module and component in Angular, integrate it within an event module, and manage data flow using input properties. Learn how to display and fetch comments, apply Angular directives, and set up isolated unit testing for components to maintain robust code.

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.

�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.
TypeScript 3.3.4
// src/app/comment-create/comment-create.module.ts
import { FormsModule } from '@angular/forms';

  1. Update NgModule as mentioned below.

    1. Add FormsModule to
...