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

Add Users' Dietary Preferences

Explore how to enhance a user signup form by adding dietary preferences using Angular's *ngFor directive and checkbox inputs. Understand how to handle user selections, update component state, and include these preferences in the authentication process for a complete signup experience.

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.

TypeScript 3.3.4
//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. ...