Registering a user

I’ve been working on logic related to users recently – I need registration, logging in and authorization to actions. This is all available out of the box in default project templates in ASP.NET MVC/Web API which are shipped together with Entity Framework and SQL Server, but I have none of them here. 🙂 I’ve only implemented registration by now, which was simple on the server side (just adding a document with little validation), but more challenging on the client side. I took care of interaction – when I do something, then something (dis)appears or a message is (un)set. So I took an opportunity to learn how to pass data between components.

First option is from the outside into a component. This is simple – add a decorator to the component’s field:

@Component({
	moduleId: module.id,
	selector: 'feedback-message',
	templateUrl: 'component.html'
})
export class FeedbackMessageComponent {
	@Input()
	text: string;
}

And then assign a value to it in a parent component’s template:

<feedback-message [text]="feedback"></feedback-message>

One thing to remember here: square brackets – they mean the direction is from the outside into the component and indicate binding to the value of a parent’s class field, not to the string “feedback”. If these brackets are missing, then the literal string is passed to the component.

Second option is passing data outside of a component, which is done using an @Output decorator:

export class RegisterUserComponent {
	@Output()
	submitForm = new EventEmitter<RegistrationResult>();
	...
}

When something happens in a component and we want to announce it, an event must be raised:

registerUser() {
	this.registerUserService.register(this.user)
		.then(() => {
			const result = new RegistrationResult(RegistrationStatuses.ok, TextConstants.registrationSuccessful);
			this.submitForm.emit(result);
		}).catch(() => {
			const result = new RegistrationResult(RegistrationStatuses.failed, TextConstants.errorOccurred);
			this.submitForm.emit(result);
		});
}

Sending data is optional. If there is nothing necessary, the type parameter of EventEmitter can be void.

And from the parent’s perspective:

<register-user *ngIf="isRegisteringUser" (submitForm)="registrationSubmitted($event)"></register-user>
registrationSubmitted(result: RegistrationResult) {
	this.feedback = result.message;
	this.isRegisteringUser = (result.status === RegistrationStatuses.failed);
}

The data are accessed thanks to $event passed in HTML. And notice the attribute – it is in round brackets, which means that direction of data flow is from a component to the outside.

Both @Input and @Output accept a string parameter which specifies a name of the attribute whose value will be assigned to the decorated field. If that parameter is missing, then the attribute must have the same name as the field.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s