Skip to main content

Posts

Showing posts with the label angular 2 cookies

Kendo UI Angular 2 Grid Filter [How To]

“How To Use Kendo UI Grid with Angular 2 ”? The Kendo UI Grid is used to displays data in a tabular format and provides a full configurations options and the following example of Kendo Grid as given below, Stayed Informed – Live PLUNKER Demo Link Stayed Informed –  Angular 2 Tutorials and Examples Example as Source code as, Angular 2 Component source as, import { Component } from '@angular/core' ; import { products } from './products' ; @ Component({ selector : 'my-app' , template : ` < kendo - grid [data] = "gridData" [height] = "370" > < kendo - grid - column field = "ProductID" title = "ID" width = "40" > < /kendo-grid-column> < kendo - grid - column field = "ProductName" title = "Name" width = "250" > < /kendo-grid-column> < kend...
Read more

Angular2 Datepicker | Angular2 date format | Angular2 date pipe

Hello everyone, I am going to share the Angular2 Date picker using the Date Picker Directive. Try the  live example  of the code shown in this page. Date Format Code:- < h1 > Today 's Date : {{value | date: ' dd / MM / yyyy '}}</h1> View Template Code:- < form > < input type = "text" date - picker ng - control = "value" [(ng - model)] = "value" / > < /form > Directive Code:- @Directive({ selector: '[date-picker]' }) Datepicker Class:- export class DatePicker extends DefaultValueAccessor implements OnInit { private element : ElementRef ; constructor (@ Self () model: NgControl, element: ElementRef, renderer: Renderer) { super(model, renderer, element); this . element = element; } public writeValue ( value : any ): void { $(this . element . nativeElement) . datepicker( 'setDate' , value); } public onInit (): void { $(t...
Read more

Angular 2 @Inputs - How to Passing data into Angular 2 components with @Input?

@Input allows you to pass data into your controller and templates through html and defining custom properties. @Input   is used to define an input for a component, we use the @Input decorator. Angular 2 components  is the core components of applications but you must need to know “ how to pass data into components to dynamically ?” and that time you need to define an input component. Stayed Informed - Angular 2 @Output You can see the below example for passing the user data in to the components. Example 1, import { Component, Input } from '@angular/core' ; @ Component({ selector : “ user - info ” , template : “ < div > Hello, This is {{ userInfo.name}} < /div>” }) export class UserInfo { @ Input() userInfo; constructor () { } } < user - info [userInfo] = "currentUser" >< /user-info> The components <user-info></user-info> is use to render the user information on the view. Example...
Read more