Angular 2 Component for SOS Gallery
===================

`<user-info>` is a component that we can use for shows user's information and change the language of our application.

#### <i class="icon-pencil"></i> How to install

Open your Angular 2 Project and execute this:

    npm install sos-user-info

#### <i class="icon-pencil"></i> Configuration

To use sos-user-info, You should write the following into your application's NgModule:

	import {UserInfoComponent,   TRANSLATION_PROVIDERS, TranslatePipe, TranslateService} from 'sos-user-info';
	
	@NgModule({
	 declarations: [UserInfoComponent,TranslatePipe],
	 providers: [TranslateService,TRANSLATION_PROVIDERS],
	   ...
	})
	export class MyAppModule {}

#### <i class="icon-pencil"></i> Simple example

    <user-info
              [Nombrevalue]="variable_name"
              [Rolvalue]="variable_rol"
              [Accessvalue]="variable_access">
    </user-info>
![enter image description here](https://lh3.googleusercontent.com/-7yzj_NrSUPM/WHaaga3H4-I/AAAAAAAAAww/2HDUmmehZp0iD2uVI00aLxy2cZ5cLH3xQCLcB/s0/Capture.PNG "Capture.PNG")

 - **Nombrevalue** Shows the user name
 - **Rolvalue** Shows the Rol of user..
 - **Accessvalue** Shows the Nivel of Access of user.

After that in our Component we are going to need three variables to set their values.

    export class AppComponent {
	      variable_name:string="User Name";
    	  variable_rol:string ="Rol";
    	  variable_access:string="Access";
    }

#### <i class="icon-pencil"></i> how to use the translator

Just you need use these sentences for the component recognize where to translate.
We can use them in anywhere into our application.

     <strong>{{ 'home' | translate }}</strong>
     <strong>{{ 'typography' | translate }}</strong>
     <strong>{{ 'layout' | translate }}</strong>