All java c# asp.net .net servlet jdbc c sqlserver android ado.net javascript php wcf clearcase angularjs 2

How to import CSS using system import in Angular JS 2.0?

you can call like following

@import 'MystleClass.css';

@Component({ templateUrl: 'card.html', styles: [` .card { height: 70px; width: 100px; } `], encapsulation: ViewEncapsulation.Native // encapsulation: ViewEncapsulation.None // encapsulation: ViewEncapsulation.Emulated is default })

What is router-outlet directive in Angular 2?

The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view and pass optional parameters along to the supporting view component to help it decide what specific content to present. We can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link. We can navigate imperatively when the user clicks a button, selects from a drop box, or in response to some other stimulus from any source. And the router logs activity in the browser's history journal so the back and forward buttons work as well.

  • Enter a URL in the address bar and the browser navigates to a corresponding page.
  • Click links on the page and the browser navigates to a new page.
  • Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

What are cookies in Angular 2 ? and how to set and get the Local Storage ?

use cookies by doing following changes in system.config.js file and it worked -

  1. Add ng2-cookies to map entry 'ng2-cookies': 'node_modules/ng2-cookies'

  2. Add ng2-cookies to packages entry 'ng2-cookies':{ defaultExtension: 'js' }

Angular 1 has $cookies. Sample:

data => $cookies.put('id_token',data.id_token),

I don't know if Angular 2 has a cookies service, you can always write your own. Check out the mozilla docs. There's a sample 63 line library in javascript for accessing cookies that is partially consistent with localStorage:

data => docCookies.setItem('id_token',data.id_token),

What are the fundamentals concepts of Angular 2?

To build an Angular 2 application you define a set of components, for every UI element, screen, and route. An application will always have a root component that contains all other components. In other words, every Angular 2 application will have a component tree Application is the root component. The Filters component has the speaker input and the filter button. TalkList is the list you see at the bottom. And TalkCmp is an item in that list.

The below are general concepts that are heavily used:

  • Separation of concern
  • Dependency injection


Those form the basis of any use if Angular. For a little more specificity the below are Angular specific things you should know: 

  • The digest loop
  • Scope
  • Directives
  • Promises ($q)
  • Filters

What is Outputs in Angular 2?

Use property binding and the @Input decorator to pass data into a component, and @Output and EventEmitter to pass data out and bind to an event.

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'user-profile', template: '
Hi, my name is {{user.name}}
' }) export class UserProfile { @Output() userUpdated = new EventEmitter(); constructor() { // Update user // ... this.userUpdated.emit(this.user); } }

How to config System.js in Angular 2?

The packages in the System config should be 'scripts' in your case. It should match the folder name. Because you have it named 'app', it does not add the defaultExtension 'js' to the modules filename

It allows to configure SystemJS to load modules compiled using the TypeScript compiler. For anonymous modules (one module per JS file), it allows to map the name of modules to JS files that actually contains the module JavaScript code.

Here is a sample. If I try to import the module named app/test, SystemJS will do:

  • Try to find a preregistered module (with System.register('app/test', ...
  • If not, it will look into its configuration to build the request to execute to load the corresponding file:
    • there is a map entry for app
    • there is a packages entry for app with defaultExtension = js
  • The request will be http://localhost:3000/app/test.js. If you have map: { app: dist }, the request would be http://localhost:3000/dist/test.js

What is RouteParams in Angular 2?

One way is

  routerOnActivate(curr: RouteSegment) {
    this.userName = curr.getParam('userName');
    this.projId = curr.getParam('projId');
  }

I would directly use this._router.navigateByUrl('user/' + userid );

What are differences between AngularJS 1 & 2?

This guy on Quora explains it very well https://www.quora.com/What-is-the-difference-between-AngularJs-and-Angular-2/answer/Er-Shahbaz-Sharif?srid=92lH

1). Angular 2 is mobile oriented & better in performance. 

Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented. Angular 2 is using Hierarchical Dependency Injection system which is major performance booster. Angular 2 implements unidirectional tree based change detection which again increases performance . As per ng-conf meetup, angular 2 is 5 times faster as compared to angular 1.

2). Angular 2 provides more choice for languages.

Angular 2 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Where, Angular 1.x has ES5, ES6, and Dart. Using of TypeScript is a great step as TypeScript is awesome way to write JavaScript.

3). Angular 2 implements web standards like components.

Angular 2 implements web standards like components, and it provides better performance than Angular 1.

4). AngularJS 2.0 is  not easy to setup as AngularJS 1.x.

AngularJS 1.x is easy to setup. All you need to do is to add reference of the library and you are good to go. Where AngularJS 2 is dependent of other libraries and it requires some efforts to set up it.

5). Angular 1.x controllers and $scope are gone.

Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with “Components” in Angular 2. Angular 2 is component based. Angular 2 is using zone.js to detect changes.

Note: there is a class with ‘export’ keyword, @Componentannotation (that’s also new in Angular 2). The @Componentannotation adds the metadata to the class.

6). Different ways to define local variables.

In Angular 2, local variables are defined using Hash(#) prefix.

<div *ngFor="#technicalDiary of technicalDiries">

7). Structural directives syntax is changed.

In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.
Angular 1.x structural directives:

<ul>
   <li ng-repeat="technology in technologies">
     {{technology.name}}
   </li>
</ul>

Angular 2 structural directives:

<ul>
  <li *ngFor="#technology of technologies">
    {{technology.name}}
  </li>
</ul>

Note: Asterisk(*) sign is used as prefix for structural directives, in is replaced with of and camelCase syntax is used.

8). Angular 2 uses camelCase syntax for built-in directives.

Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel

9). Angular 2, directly uses the valid HTML DOM element properties and events.

One of the major change in Angular 2 is, that it directly uses the valid HTML DOM element properties and events. Due to this, many of the available built-in directives in Angular 1.x are now no longer required. Like ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hiddenproperties to get the same output. And same goes with event based directives like ng-click and ng-blur.

<button ng-click="doSomething()">

And in Angular 2, take the HTML event and wrap it with parentheses.

<button (click)="doSomething()">

10). Two-way data binding: ng-model replaced with [(ngModel)]

In Angular 1.x, ng-model is used for two-way data binding, but with Angular 2 it is replaced with [(ngModel)].
Angular 1.x, two-way data binding,

<input ng-model="technology.name"></input>

In Angular 2,

<input [(ngModel)]="technology.name"></input>

What are Components in Angular 2?

In Angular JS 2, the components are the main way we build and specify elements and logic on the page.

When we use the <my-component></my-component> tag in our HTML, this component will be created, our constructor called, and rendered.

Component is a decorator, it allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

An Angular application is a tree of various components. The Components are the most basic building block of an UI.  Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

Key Metadata Properties:
Animations - list of animations of this component
changeDetection - change detection strategy used by this component
encapsulation - style encapsulation strategy used by this component
entryComponents - list of components that are dynamically inserted into the view of this component
exportAs - name under which the component instance is exported in a template
host - map of class property to host element bindings for events, properties and attributes
inputs - list of class property names to data-bind as component inputs
interpolation - custom interpolation markers used in this component's template
moduleId - ES/CommonJS module id of the file in which this component is defined
outputs - list of class property names that expose output events that others can subscribe to
providers - list of providers available to this component and its children
queries - configure queries that can be injected into the component
selector - css selector that identifies this component in a template
styleUrls - list of urls to stylesheets to be applied to this component's view
styles - inline-defined styles to be applied to this component's view
template - inline-defined template for the view
templateUrl - url to an external file containing a template for the view
viewProviders - list of providers available to this component and its view children

  • animations - list of animations of this component
  • changeDetection - change detection strategy used by this component
  • encapsulation - style encapsulation strategy used by this component
  • entryComponents - list of components that are dynamically inserted into the view of this component
  • exportAs - name under which the component instance is exported in a template
  • host - map of class property to host element bindings for events, properties and attributes
  • inputs - list of class property names to data-bind as component inputs
  • interpolation - custom interpolation markers used in this component's template
  • moduleId - ES/CommonJS module id of the file in which this component is defined
  • outputs - list of class property names that expose output events that others can subscribe to
  • providers - list of providers available to this component and its children
well components are nothing but its a kind of normal class . every time you have to create component in each component they have metadata and decorator .....metadata could be selector nd decorator normal your html and css

Describe the Template in Angular 2?

In one of the recent updates of angular2, @View was made optional. All of its properties moved into @Components. As of now, @View is redundant. I my applications, I use only the Component decorators. I find this approach easy to write and maintain.

Angular treats template elements in a special way. They are used to create views, chunks of DOM you can dynamically manipulate. The * syntax is a shortcut that lets you void writing the whole <template> element.