Element Angular Setup

Aside from creating an .npmrc file, you add Element to your Angular project much like you would add any other library.

1. Create your app

   # Install the Angular CLI globally
   # You can skip this if you already have the latest version installed
   npm i -g @angular/cli
   
   # Create a new app
   # Substitute your app's actual name here
   ng new super-cool-app

   The CLI will prompt you with a series of questions. Make sure to choose SCSS as your stylesheet format!

   cd super-cool-app

2. Create an .npmrc file pointing to Element

3. Add @element/angular as a dependency of your project:

   # Install with yarn
   yarn add @element/angular
   
   # Or install with NPM
   npm i @element/angular

4. Add the ElementAngularModule to your app's root module, which is usually called app.module.ts.

     // app.module.ts
     import {BrowserModule} from '@angular/platform-browser';
     import {NgModule} from '@angular/core';
   + import {ElementAngularModule} from '@element/angular';
   
     import {AppComponent} from './app.component';
   
     @NgModule({
       declarations: [AppComponent],
   -   imports: [BrowserModule],
   +   imports: [BrowserModule, ElementAngularModule],
       providers: [],
       bootstrap: [AppComponent],
     })
     export class AppModule {}

5. Render a Element component!

   Replace the contents of app.component.html with:

   <div element-login-page>
     <div element-login-form>
       <div element-text-field element-login-username label="Username">
         <input type="text" element-text-field-input id="foo" />
       </div>
       <div element-text-field element-login-password label="Password">
         <input type="password" element-text-field-input id="bar" />
       </div>
     </div>
     <div element-legal-footer></div>
   </div>

   If that login page renders properly and without errors, then you're good to go!

Next Steps

You've used Element to create a beautiful login page, but what's next?

Element Style System

Element styles are currently running in your project, but we didn't take any steps to configure those styles. If your use case calls for customizing Element styles, please see our style system documentation.

Add additional functionality to element-login-form

You probably noticed that the "log in" button on our login form doesn't do anything and that it doesn't have any forgot password or sign up functionality. Let's fix that!

The element-login-form component accepts several additional inputs to customize its functionality. Two of those are showForgotPassword, and showSignUp. Each of those inputs accepts a boolean and is used to show those sections of the login form.

Using them along with the corresponding events might look something like this:

<div element-login-page>
  <div
    element-login-form
    showSignUp="true"
    showForgotPassword="true"
    (logIn)="onLogIn($event)"
    (signUp)="onSignUp()"
    (forgotPassword)="onForgotPassword()"
  >
    <div element-text-field element-login-username label="Username">
      <input type="text" element-text-field-input id="foo" />
    </div>
    <div element-text-field element-login-password label="Password">
      <input type="password" element-text-field-input id="bar" />
    </div>
  </div>
  <div element-legal-footer></div>
</div>

Notice that after you pass those additional inputs, buttons for forgot password and sign up have magically appeared on your page in an intelligent fashion, neat!

Internationalization

Finally, in many applications it's important to be able to translate the UI into different languages. Element Angular supports this through inputs. Every string that's displayed on the screen has a corresponding input that allows you to pass an overriding value.

For example, try passing these two inputs:

<div element-login-page>
  <div
    element-login-form
    signInLabel="Sign In To Your Account"
    submitButtonLabel="Let's goooo"
  >
    ...
  </div>
</div>