# 5.Create AddAttendeeComponent

## 1.  Create add AddAttendeeComponent

* Add the component with the following command

```
ng g c event/components/add-attendee
```

## 2.  Create a Attendee interface

It is encouraged to make many custom interfaces and discouraged to leave code un-typed. It is important to note these interfaces do not get added to the JavaScript bundled and sent to the browser, so adding them to a global folder like this is acceptable in this respect. 

* Create a models folder on the root of the app folder.
* Add a Attendee interface file to the models folder with the below code.

{% code title="src/app/models/attendee.ts" %}

```typescript
export interface Attendee {
    name: string;
    guests: number;
    attending: boolean;
}

```

{% endcode %}

In Angular and NgRx in particular it is very common to make an index.ts file which acts as a public API for a section of code like a models folder or a feature module. Everything that is meant to be shared from this section of code is described here, helping other developers know what by design is to be consumed from each section of an app.

* Create an index.ts file to the models folder to re-export all the interfaces we make as we go, starting with our Attendee interface.

{% code title="src/app/models/index.ts" %}

```typescript
export * from './attendee';

```

{% endcode %}

## 3. Add AddAttendeeComponent selector to event container

* Add the AddAttendeeComponent to  the EventComponent.

{% code title="src/app/event/containers/event/event.component.html" %}

```markup
<app-add-attendee></app-add-attendee>
```

{% endcode %}

## 4. Add ReactiveFormsModule to EventModule

In Angular you have "Template Driven" and  "Reactive Forms". Reactive forms are the newer of the two and the recommended approach from the Angular team. Reactive forms are powerful and flexible with the ability to configure in code making it easy to change forms dynamically, listening to field changes as observables and make custom asynchronous validation simple.

* Import the ReactiveFormsModule into EventModule and register it in the imports array of the @NgModule decorator.

{% code title="src/app/event/event.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { EventComponent } from './containers/event/event.component';
import { AddAttendeeComponent } from './components/add-attendee/add-attendee.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([{ path: '', component: EventComponent }]),
    ReactiveFormsModule
  ],
  declarations: [EventComponent, AddAttendeeComponent]
})
export class EventModule {}

```

{% endcode %}

## 5. Add input and reactive form to AddAttendeeComponent

To keep this presentational component simple and avoid injecting in dependencies making it harder to mock we will not use the popular [FormBuilder](https://angular.io/api/forms/FormBuilder) from Angular. We only have a single field or`FormControl` in our `FormGroup` but it is easy to imagine how we could add more to this `addAttendeeForm`.

* Remove the `constructor` and `ngOnInit` lifecycle hook from the component, further helping other developers know this is a presentational component and should not need a constructor.
* Add `addAttendeeForm` reactive form, `FormGroup` and `FormControl`.

{% code title="src\app\event\components\add-attendee\add-attendee.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { Attendee } from '../../../models';
import { FormGroup } from '@angular/forms';
import { FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-add-attendee',
  templateUrl: './add-attendee.component.html',
  styleUrls: ['./add-attendee.component.scss']
})
export class AddAttendeeComponent {
  addAttendeeForm = new FormGroup({
    name: new FormControl('', [Validators.required])
  });
}

```

{% endcode %}

* Add `submit` method to be executed when someone hits the add button in the HTML template.
* In the `submit` method build up a new `attendee` constant which we can add on the attending and guests fields we have not yet implemented in our form.
* Console log the submitted value until the next section when we emit the submitted form out of this presentational component to be listened to by the parent container component.

{% hint style="info" %}
I am using the [Turbo Console Visual Studio Extension](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) to make more readable log messages.&#x20;
{% endhint %}

{% code title="src\app\event\components\add-attendee\add-attendee.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Attendee } from '../../../models';

@Component({
  selector: 'app-add-attendee',
  templateUrl: './add-attendee.component.html',
  styleUrls: ['./add-attendee.component.scss']
})
export class AddAttendeeComponent {
  addAttendeeForm = new FormGroup({
    name: new FormControl('', [Validators.required])
  });

  submit() {
    const attendee = {
      name: this.addAttendeeForm.value.name,
      attending: true,
      guests: 0
    };
    console.log('TCL: AddAttendeeComponent -> submit -> attendee', attendee);
  }
}
```

{% endcode %}

## 6. Add form to component HTML

* Create a HTML form element and add an angular `[formGroup]` binding to angularize the form.
* &#x20;and `(ngSubmit)` event handler to call our submit method when the form is submitted. We do not need to pass the form value over we can grab in in the template from the `addAttendeeForm`.
* Bind the name field of our FormControl to the input element with angular's `formControlName` attribute.

{% code title="src/app/event/components/add-attendee/add-attendee.component.html" %}

```markup
<form [formGroup]="addAttendeeForm" (ngSubmit)="submit()">
    <input type="text" formControlName="name">
    <button type="submit" >submit</button>
</form>

```

{% endcode %}

## 7. Add CSS styles to component SCSS file

* Add styles to make the button and input element inline next to each other.

{% code title="src/app/event/components/add-attendee/add-attendee.component.scss" %}

```css
form {
  display: flex;
}

```

{% endcode %}

## 8. Submit form and check it's value

* Start the app and check the correct value is logged to the console when you submit a name.

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/5-create-add-attendee-component>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://duncanhunter.gitbook.io/angular-and-ngrx/5.create-addattendeecomponent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.