How To Build Your Next App or Website

Questions
Answers
Coaching
 Build Cross Platform Apps in Angular
Build Cross Platform Desktop, Mobile or Web apps with an Angular UI Dev Kit and the concepts of angular components, modules, forms, validation, api calls, data-binding and more ..

Toast Messages:
Learn More

Use unobtrusive Toast messages to gently notify users of the success, failure or state of their front-end actions & tasks:

Modules:
Learn More
Organize app features into components & modules so they are easier to maintain or re-use.
An example is a footer module which includes a: component (*.ts), stylesheet (*.scss), template (*.html) and a module (*.module.ts)
Routing & Navigation:
Learn More
Dynamically navigate users to views or parts your app depending on sections or parts of the url instead of loading a new page (app.module.ts):
/** 
 * RouteModule.forRoot declares a Singleton RouterModule with an array of routes
*/
imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'login', component:LoginComponent},
    {path: 'register', component: RegisterComponent}
  ]),
],
Routing & Views:
Learn More
Dynamically load parts of your app based on the url using the < router-outlet > directive and display clickable navigation using the directive in your app's root template (app.component.html):
< nav >
  < a routerLink="/login" >Login< /a > |
  < a routerLink="/register" >Register< /a >
< /nav >
< router-outlet >< /router-outlet >
Routing & Security:
Learn More
Guard against un-authorized access to features, pages or views and block any route from loading based on permissions or authentication using a class that implements the CanActivate interface(AuthGuard.ts):
@Injectable({providedIn:'root'})
export class AuthGuard implements CanActivate {
  constructor(private _authService: AuthService, private _router: Router) {
  }
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean {
    if (this._authService.isAuthenticated()) {
        return true;
    }
    // navigate to login page
    this._router.navigate(['/login']);
    return false;
  }
}
Protect any route using the AuthGuard service (app.module.ts):
imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'login', component:LoginComponent},
    {path: 'account', component: AccountComponent, canActivate:[AuthGuard]}
  ]),
],
Data-Binding, @Input & @Output:
Learn More
Use @Input decorator to pass data from parent to child and @Output (or observables) to pass data from the child to the parent.
A parent component can bind it's property (e.g. pData) to a child's (e.g. cData) using the child 's @Input() property (@Input() cData: any;):
< page-child [cData] = "pData" > < /page-child >
A child component can pass back it's data to a parent's using the child 's @Output() property and an event emitter:
@Input() cData: any;
@Output() dataChange = new EventEmitter();
changeData() {
    this.dataChange.emit('data has changed);
}
A parent component can handle or respond to an Output event from the child using an event handler in its class:
< page-child (dataChange) = "handleChildDataChange($event)" > < /page-child >
A cheatsheet can help summarize Angular's template binding: Learn More
Forms:
Learn More
Forms allow users to submit input when interacting with an app. They are useful for signing users in, searching, submitting feedback and more.
Angular provides template-driven forms and model-driven or reactive forms.
Template driven forms use built-in directives like ngModel and ngForm to build forms.
A template driven newsletter signup component looks like: Learn More

Subscribe to Angular UI Toolkit Newsletter

Download "The Angular UI Toolkit" or Get the latest posts delivered to your inbox ...

We respect your email privacy

How To Add Custom Reusable Alerts, Notifications, Messages or Announcements to your Angular Mobile Apps / Websites
Toast messages are gentle messages displayed to alert users of the success, failure or state of user actions.

Do write a reusable toast message in a "utilities provider". Don't code multiple toast messages that provide the same or similar behaviors

 View Code on Github
If you like this post, join our facebook group for more posts like this ...
How To Add Components or Modules to an Angular / Ionic App

Design repeating UI features in components with a view, class & stylesheet and export the component as a module for reusability across your app

A reusable footer component in an Ionic Angular App is designed as:
  • footer.html - A user interface (UI) file that includes all the HTML presented by the footer
  • footer.ts - A typescript class that represents the view / template's data model and presentational logic
  • footer.module.ts - A typescript class that imports the footer.ts class and re-exports it as a footer module that's reusable across the app
Ionic + Angular Page Footer Component
 View Code on Github
If you like this post, join our facebook group for more posts like this ...