Tutorial Site ng

Add Dialog Component from Angular Material

Anonymous (anonymous@undisclosed.example.com) — 2019-02-12T08:53:43+00:00

Add Dialog Component from Angular Material Basic Dialog * Install @angular/material by npm command. * Create a new component by ng g c command. * Assume the name of the new component is AlertDialogComponent, and it only display an alert message with an OK button. The TS file would be: (Note: this constructor take a

Adding Router to App

Anonymous (anonymous@undisclosed.example.com) — 2019-11-27T09:23:49+00:00

Adding Router to App Add the Routing Module app-routing.module.ts will be add to project with the following code: ng generate module app-routing --flat --module=app Add Component for Routing to Add a component for the router to route to. Here we have a component called

Build Project that Needs to Use a Lot of Memory

Anonymous (anonymous@undisclosed.example.com) — 2019-05-15T16:17:10+00:00

Build Project that Needs to Use a Lot of Memory Normally, we build angular project with ng build --prod --base-href /YOUR_BASE_HREF/ --env=prod but ng command uses at most 4GB ram to build the source, and it might not enough for some big project. We can use node command directly to build it. Go to your project directory and try:

Create a New Project

Anonymous (anonymous@undisclosed.example.com) — 2018-12-21T09:58:37+00:00

Create a New Project Here we will create a front end call my-app, and run it as a serve. You can visit it with a web browser at afterward. 127.0.0.1 is the local host of your computer, and 4200 is the default angular serve port. This setting is good for developing and debugging. Note that create a new app take time for angular cli to download the dependencies from the web.

Creating Component

Anonymous (anonymous@undisclosed.example.com) — 2019-11-18T14:18:59+00:00

Creating Component Using CLI We can use console line input (CLI) to generate new angular component, where componentName is the name of your component. ng generate component componentName It can be simply as: ng g c componentName CREATE src/app/component-name/component-name.component.html (33 bytes) CREATE src/app/component-name/component-name.component.spec.ts (678 bytes) CREATE src/app/component-name/component-name.component.ts (300 bytes) CREATE src/app/component-name/component-name.compo…

Directive ngClass

Anonymous (anonymous@undisclosed.example.com) — 2019-11-18T17:00:16+00:00

Directive ngClass Assume we have a component called servers. ngClass directive can dynamically change the CSS class of an element. Different from ngStyle, we need a to use the component CSS file this time to set the style. servers.component.html

Directive *ngFor

Anonymous (anonymous@undisclosed.example.com) — 2019-11-18T17:24:38+00:00

Directive *ngFor Assume we have a component called servers. ngFor takes an array, and loop them through. {{}} is the way to bind the value from JavaScript/Type Script to HTML. Of course, the hList in our example can be change dynamically, and the UI will refresh if it is changed.

Directive *ngIf

Anonymous (anonymous@undisclosed.example.com) — 2019-11-18T16:00:36+00:00

Directive *ngIf We can use ngIf directive to control an UI element to show or not. The syntax is: ...THE CONTENT... DOM_ELEMENT can be like

, or anything HTML tag. The condition_expression could be a Boolean variable or a function that return Boolean result.

Directive ngStyle

Anonymous (anonymous@undisclosed.example.com) — 2019-11-18T17:01:03+00:00

Directive ngStyle Assume we have a component called servers. By clicking the button, the font size of the text will increase, and the background color of it will change. servers.component.html Here we user binding for our ngStyle directive. The value of each

EventEmitter

Anonymous (anonymous@undisclosed.example.com) — 2019-11-19T17:56:22+00:00

EventEmitter We can use event emitter with service to achieve cross components communication. Assume we have two components called servers and another, and a service called data We want to emit a signal when the buttons on servers is clicked, and the

@Input() @Output() for Child and Parent Component Communication

Anonymous (anonymous@undisclosed.example.com) — 2019-11-22T12:01:35+00:00

@Input() @Output() for Child and Parent Component Communication This example shows how @Input, @Output decorations work. To make is simple to read, this example is actually doing something not so particle in the real world... Create a parent and child component

Installing Angular Command Line Interface(CLI)

Anonymous (anonymous@undisclosed.example.com) — 2018-12-21T09:51:34+00:00

Installing Angular Command Line Interface(CLI) * Install Node.js. Install Node.js * Run npm install -g @angular/cli in terminal (cmd) * Wait for it! It really takes time. If you want to install a specific version of Angular CLI, say version 1.7.3, you can run

Observable Interval Subscription

Anonymous (anonymous@undisclosed.example.com) — 2019-03-13T16:36:21+00:00

Observable Interval Subscription The following example show how to setup a observable interval for 5 seconds. Note that observable interval will call the callback function periodically, in this case 5 seconds each, until it has been unsubscribe(). Since we unsubscribe the observable in the callback function here, it would than be a one time call. It is important to unsubscribe the observable interval once your are done with it, or it will cause memory leakage once your leave the component conta…

Proxy to Back-end For Development

Anonymous (anonymous@undisclosed.example.com) — 2019-01-02T09:56:08+00:00

Proxy to Back-end For Development * Create a file call proxy.conf.json in the root directory of your project. * Fill the config in proxy.conf.json: { "/BACKEND_SERVER_URL/*": { "target": "http://localhost:8080/BACKEND_SERVER_URL/", "secure": false, "logLevel": "debug", "changeOrigin": false, "pathRewrite": { "^/BACKEND_SERVER_URL": "" } , "headers": {"ipaddress":"127.0.0.1"} } }

Reactive Form

Anonymous (anonymous@undisclosed.example.com) — 2019-11-26T12:25:40+00:00

Reactive Form This example shows how to create a reactive form in code, and bind it to the HTML UI. Codes are form . His course is good, I learn most of the Angular stuff from him. reactive-form.component.ts First we create a FormGroup instance in our code. Then we setup the struct of this from group on

Service

Anonymous (anonymous@undisclosed.example.com) — 2019-11-19T16:54:45+00:00

Service Angular services can be called by different component in your project through Angular dependency injection. If we use Angualt dependency injection, services are singleton, meaning that every component that use the service is using the same instance.

Template Driven Form

Anonymous (anonymous@undisclosed.example.com) — 2019-11-22T16:26:50+00:00

Template Driven Form In order to use ngForm, we need to import the Form module ni app.module.ts and your component. component.html When the submit button is clicked, we have the form to call function logForm(form.value).

Using Material Auto Complete

Anonymous (anonymous@undisclosed.example.com) — 2019-05-06T16:13:45+00:00

Using Material Auto Complete Installing the Related Dependencies npm install --save @angular/material @angular/cdk @angular/animation Adding the Module in app.module.ts ... imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatAutocompleteModule, MatInputModule, FormsModule, ReactiveFormsModule ], ...