Angular Nx Workspace

Angular Nx Workspace thumb

Share

Project Description

A workspace generated with the amazing Angular Nx. This workspace includes many components that solve common Angular problems. I have used Bootstrap so all the components are in a single project.
Here I have the modules:

Component Interactions

Component interaction techniques using the EventEmitter object,  @Input@Output, @ViewChild directives and a shred service with RxJs.

Form Validation

An Angular simple application to show form validation. This is a fork from a schotch.io project. I have thought I could add some styles and Karma unit tests to see how you can test forms with Angular. The result is pretty interesting for frontend beginners and testers.

There are 4 different forms:

  1. Template Driven Form
  2. Model Driven (Reactive) Form
  3. Model Driven (Reactive) Form with Validation
  4. Login Form that integrates the Auth0 API

To get the Login Form to function properly, you will need to have an Auth0 account, you can sign up for a free Auth0 account here. Once you have an account go into the app.login.ts file and make the following edits:

  1. Replace YOUR-AUTH0-CLIENT-ID with your credentials
  2. Replace YOUR-AUTH0-DOMAIN with your Auth0 domain
  3. Replace YOUR-DATABASE-CONNECTION with whatever you name your username and database connection in the Auth0 Management Dashboard

Two Sums

The problem: given an array of numbers with no duplicates and a single target number, find two numbers. The sum of these two numbers must be equals to the target number.
Starting with the first number of the array, the index of the second number must not be less than the current index. You can traverse the array only one time.

Unique IDs in Modal Window

unique IDs select in a modal window. The user is able to select only 1 ID from a list. When an ID is selected, a new row of selection is created dynamically.
This was a great challenge. The project shows how to deal with multiple lists, components, and services.
Tests with Karma, Jasmine, and Protractor are included with a successful Travis configuration for the continuous integration.

SEO Tools

Validate title and description meta tags, extract keywords from a text string and show a long checklist of tasks for web applications and websites.

Project Details