Angular-ElectronJS — Login page

  • Because Material Angular is developed by Angular, therefore it integrates easily into an application.
  • Several composants are already there.
  • We’ll need to add animations and a somewhat complex layout later. For this, there are two extensions which are the flex-layout and the CDK
cd nodejs nodemon 
./bin/www
npm install --save @angular/material @angular/cdk @angular/animations hammerjs @fortawesome/fontawesome-free @angular/flex-layout
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({ 
imports: [BrowserAnimationsModule]
})

Adding the material theme

In src/styles.scss, let’s add

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts'; 
@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
import 'hammerjs';
ng g component components/login
  • Creates the file src/app/components/login/login.component.html
  • Creates the file src/app/components/login/login.component.spec.ts
  • Creates the file src/app/components/login/login.component.ts
  • Creates file src/app/components/login/login.component.scss
  • Add the component in src/app/app.module.ts
import { LoginComponent } from './components/login/login.component';
@NgModule({ declarations: [ LoginComponent ] })

Now that we have our page, how do we access it via the browser?

Well I’d like to type http://localhost:4200/#/login and see the login page angular created.

import { LoginComponent } from './components/login/login.component';
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'login', component: LoginComponent } ];
<div fxLayout="row" fxLayoutAlign="center" class="login-main"><mat-card ><mat-card-header><mat-card-title>{{ 'PAGES.login.header' | translate }}</mat-card-title></mat-card-header><mat-card-content fxLayout="column"><mat-form-field><input matInput placeholder="{{ 'PAGES.login.email_placeholder' | translate }}"></mat-form-field><mat-form-field><input type="password" matInput placeholder="{{ 'PAGES.login.password_placeholder' | translate }}"></mat-form-field></mat-card-content><mat-card-actions align="end"><button mat-raised-button color="primary">{{ 'PAGES.login.button' | translate }}</button></mat-card-actions></mat-card></div>
import { FlexLayoutModule } from '@angular/flex-layout'; 
// Material
import {
MatSidenavModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
MatListModule
} from '@angular/material';
@NgModule({ 
// ...
imports: [
// Material
MatSidenavModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatListModule, MatInputModule,
MatFormFieldModule,
FlexLayoutModule
]
})
.login-main { margin-top: 2em; } .mat-card { width: 60%; }
{ "PAGES": { 
"HOME": {
"TITLE": "Welcome "
},
"login": {
"header": "Login ",
"email_placeholder": "Votre identifiant",
"password_placeholder": "Votre mot de passe",
"button": "Se connecter"
}
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store