Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 Libraries

Angular libraries are built a solution of general problems like presenting a unified user interface, presenting data, and allowing the data entry. Developers can create standard solutions for particular domains that can be adapted for reuse in different apps. These solutions has been built as Angular libraries, and the libraries can be published and shared as an npm package.

The Angular library is an angular project, but it differs from the angular app in terms which cannot run on its own. It is imported and also used in our app.

Angular 8 libraries Usage

Angular libraries Usage

  • Angular libraries expand Angular's base functionalities. For example, if we want to add reactive forms to an app, and the library package using ng add @angular/forms, then we can import the Reactive Froms Module from the @angular/forms library our application code.
  • Angular Material is an example of an extensive, general-purpose library that provides sophisticated, reusable, and adaptable UI components.

Installing libraries in Angular 8

Libraries are published as npm packages and unified with the Angular CLI (Command Line Interface). To united reusable library code into an application, we have to install the package and import the provided functionality where we use it.

Syntax

ng add

The ng add Command use the npm package manager to install the library package, an instance that is included in the package to other within the project code, such as, adding import statements, fonts, themes, etc.

Library typing

Library packages include typing in d.ts files. If our library's package does not involve typing and IDE shows an error, we have to install the library’s associated @types/package.

For example, we have a library named d1:

npm install d1–save
npm install @types/d1--save-dev 

types defined in a @types/package for a library installed in the workspace added to the typescript configuration for the Project that uses the library looks for types in the node_modules/@types folder, so we don't have to add each type package individually.

If a library doesn’t contain typing at @types/, we can still use it by manually add typings for it. You can do it by the following:

Create a typings.d.ts file in our src/folder. This file is automatically included as a global type definition.

Add the following code in src/typing.d.ts.

 declare module 'host.' 
 {
 export interface Host
 {
 protocol?: string;
 hostname?: string;
 pathname?: string;
 }
 export function parse(URL: string, queryString?: string): Host;
 } 

Add the given code in the component or file that uses the library:

import * as host from 'host';
constparsedUrl =host. Parse('https://angular.io');
console.log(parsedUrl.hostname); 

Updating libraries in Angular 8

We can update the libraries by using the ng update command. It updates individual library versions. The Angular CLI has checked the latest published release of the library, and if it finds the latest version is updated than our installed version, download it and update the package.json to match the latest version.

Syntax

ngupdate 

Adding a library to the global runtime scope

We have to configure the CLI to do this at build time using the “scripts” and “styles” of the build target in the CLI configuration file, angular.json.

For example, to use the Bootstrap 4 library, first install the library and its dependencies using the npm package manager.

npm install Bootstrap --save

Add the Bootstrap CSS file to "styles" array:

 “styles”:
 [
 “node_modules/bootstrap/dist/css/bootstrap.css”,
 “src/styles.css”
 ], 

How to create new libraries in Angular?

We can create and publish our new libraries to extend Angular Functionalities. It is generally used when we need to solve the same problem in one app, and we have a candidate for a library.

We can create a button that sends users to our company website that should be included in all apps that our company builds.

Open Angular CLI and write the following syntax to create a new library.

Syntax

ng generate library my-library

It will create a projects/my-lib folder in our workspace, which contains a component and a service inside a NgModule. The workspace configuration file angular.json is updated with a project of type' library'.

 "projects": {
...
"my-lib": {
"root": "projects/my-lib",
"sourceRoot": "projects/my-lib/src",
"projectType": "library",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
... 

Now, we can build, test, and lint our Project using the following commands:

 ng build my-lib
 ng test my-lib
 ng lint my-lib 



ADVERTISEMENT
ADVERTISEMENT