Angular UI Components

In my search for having UIs that can be used with Angular to make input easy and visually appealing, I came across a number of third-party UI components such as High Charts and NG Bootstrap. The issue was that these were paid.

PrimeNG

Then I came across Prime NG which was what I was looking for:

• They had over 70 different UI components that were visually appealing.

• Even provided charts which many other UI components did not provide.

• Came under MIT licensing, which means they could be used for free.

• Allowed for different themes to be used.

• Useful components I thought were TabView, Charts, Tree, File upload and Breadcrumb.

• Were 95% native JavaScript, which means they didn’t rely on other 3rd party libraries.

Some of the other thing I still need to find out are how to change page layout based on mobile or desktop - Responsive Web Design.

Unit Testing

For unit testing using Karma with PrimeNG, the following annoying warning appears:

 WARN: ''p-button' is not a known element:
1. If 'p-button' is an Angular component, then verify that it is part of this module.
2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of thWARN: ''p-button' is not a known element:
1

This can be fixed in the component.spec.ts unit test file by adding the following highlighted lines:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StockItemComponent } from './stock-item.component';
import { Stock } from '../../model/stock';
import { By } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('StockItemComponent', () => {
  let component: StockItemComponent;
  let fixture: ComponentFixture<StockItemComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ StockItemComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
  }));

Form Control State

Control	CSS Class if
State	True	False
Visited	ng-touched	ng-untouched
Changed	ng-dirty	ng-pristine
Valid	ng-valid	ng-invalid