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:

	selector: 'feedback-message',
	templateUrl: 'component.html'
export class FeedbackMessageComponent {
	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 {
	submitForm = new EventEmitter<RegistrationResult>();

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

registerUser() {
		.then(() => {
			const result = new RegistrationResult(RegistrationStatuses.ok, TextConstants.registrationSuccessful);
		}).catch(() => {
			const result = new RegistrationResult(RegistrationStatuses.failed, TextConstants.errorOccurred);

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) { = 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.


Leave a Reply

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

You are commenting using your 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