CSS for td in the same line (Angular 2)

Html

<table id="table_id"><tr><td>testtesttesttest</td>

<td>testtesttesttest</td>

</tr>
</table>

All about angular CLI

BEFORE YOU INSTALL: please read the prerequisites

npm install -g @angular/cli

Usage

ng help

Using bootstrap in angular 2

To use bootstrap in angular 2  we need to add ngx-bootstrap

• install ngx-bootstrap and bootstrap

  npm install ngx-bootstrap bootstrap --save

• open src/app/app.module.ts and add

Add Extensions for visual studio code

We can add extensions to visual studio code using

Example:
If we want to use TSLint (extensible static analysis tool that checks TypeScript code for

Image with rounded corners

• We need to use the image tag
• Need to be careful while specifying the relative path as shown below
• Create css class with border-radius
• Use the css class in the html 

Simple Angular Route

Create an angular component

• Create a component.ts
• Create an html file
• Import angular core modules
• Define metadata for the component using @Component
• Create a new class,specify the properties of a class and export the class

Angular 2 validations for input field

Angular places these classes automatically on the form. Same css classes are also available as properties for ng module

Data binding in Angular 2

Important changes in angular 4

These are some of the important changes related to angular 4

• Skipping angular 3.0 to angular 4.0 so we can align core with the router which is already 3.0
• Compiler is faster compared to angular 2
• Some of the bugs which are in angular 2 are rectified in angular 4
• Else clause has been introduced 

 

String Manipulation ( Change first letter to Uppercase )

Angular function for converting the first letter to uppercase

firstNameToUpperCase(value:string){
       //Check if the value exists
      if(value.length > 0)
      {
        //Fetch the first character and turn it into upper and leave the rest
        this.userModel.firstName=value.charAt(0).toUpperCase() + value.slice(1);

      }
      else
      {
          this.userModel.firstName=value;
      }
   }

Quick reference for Angular 2 changes

Changes in Angular 2 compared to angular 1

• Ngref= href property binding. Browser module has definition to *ngref. Any directive that changes the directive is known as structural directive
  *ngFor
• No watchers and No digest cycle
• Binding syntax has been changed
• Property binding is done using [ ]

                  Element property  < Img [src] = "vehicle.imageurl">

Nested component angular 2

For creating nested component we need to create the component under the shared folder.

When we use a component as a directive, we need to tell angular how to find that directive.We do that by declaring the nested component in an angular module as shown below

In the import we need to specify the path of the file and then add it in the declarations with the ngModule

import { StarComponent }  from './shared/star.component';


@NgModule({
  imports:      [ BrowserModule,FormsModule ],
  declarations: [ AppComponent , 
                  UserComponent,
                  ProductListComponent,
                  ProductFilterPipe,
                  StarComponent],
  bootstrap:    [ AppComponent ]
})

Services and dependency injection in angular 2

Service

• Is a class with a focused purpose
• Used for features that
• Are independent from any particular component
• Provides shared data or logic across components
• Encapsulates external interactions

Angular 2 HTTP Requests with Observables

We use an http client to talk to a remote server.

• The Angular Http client communicates with the server using a familiar HTTP request/response protocol. The Http client is one of a family of services in the Angular HTTP library.
• Before you can use the Http client, you need to register it as a service provider with the dependency injection system.

Subscribing to an observable in angular2

• Observable are similar to promises but with major difference that make them better.
• Observables is an ES7 feature which means you need to make use of an external library to use it today. RxJS is a good one. RxJS also provides Observable operators which you can use to manipulate the data being emitted. Some of these operators are:

Exception handling in angular 2

1. we need to use "catch" operator
2. Pass it to error handling method
3. The error handling method has only  one parameter the error response                                      
4. In this message we can handle errors appropriately

Improving angular 2 components

Strong typing 

• Benefits of using typescript is its strong typing.Every property has a type, every method has a return type, every method parameter has a type
• Strong typing helps minimize errors through better syntax checking
• If we do not have a pre defined type then we can use any [ ]

Bootstrap table using angular 2

We can display an html table as a grid using bootstrap css class.

Strongly typed Angular 2 components

Typescript, is a typed superset of the JavaScript language that is compiled to produce clean, simple cross-browser compatible JavaScript code, which can help when building and maintaining large-scale applications. Typescript has features of ES6 such as interfaces, classes and modules.


Note: To specify custom typing we can use an interface
In this example we have specified custom type for address using an interface.

Conditional statements in angular 2

• { * } marks the directive as the structural directive
• BrowserModule exposes ng-if and ng-for directives