Learn Front-End Development and Automated Testing with Angular/

...

/

Add Users' Dietary Preferences

Add Users' Dietary Preferences

Let's add another input field, "dietary preferences," to our signup form.

We'll cover the following...

We have our signup form ready and working so far. Currently, it has username and password fields. In this lesson, let’s add another field where users can input their dietary preferences when signing up.

This is our updated code:

�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`�
Signup form

Add dietary preferences

As our API specified, there’s an optional property for dietary preferences that can be included when we create users. Let’s first add the dietary preferences to SignupComponent just below our user property.

Press + to interact
//src/app/signup/signup.component.ts
user: User = { 'username': '', password: '' };
dietPreferences = [
  { name: 'BBQ', checked: false },
  { name: 'Burger', checked: false },
  { name: 'Chinese', checked: false },
  { name: 'Deli', checked: false },
  { name: 'Fast Food', checked: false },
  { name: 'Italian', checked: false },
  { name: 'Japanese', checked: false },
  { name: 'Mexican', checked: false },
  { name: 'Pizza', checked: false }
];

Add the following markup just below the password section in our template. ...