Skip to content

Instantly share code, notes, and snippets.

View NishuGoel's full-sized avatar

Nishu Goel NishuGoel

273 followers · 34 following
View GitHub Profile
@NishuGoel
NishuGoel / bg.directive.ts
Created July 27, 2018 16:14
Creating Custom Attribute Directive
import { Directive, ElementRef, Renderer } from "@angular/core";
@Directive({
selector: '[app-ch-color]'
})
export class bgDirective{
constructor(private el: ElementRef, private renderer: Renderer){
this.changeColor('red');
}
changeColor(color: string){
@NishuGoel
NishuGoel / app.component.html
Created July 27, 2018 16:17
<div app-ch-color>
Hello Nepal!!!
</div>
<div>
Hello Nepal!!! (No Custom Attribute applied)
</div>
@NishuGoel
NishuGoel / bg1.directive.ts
Created July 27, 2018 16:19
import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";
@Directive({
selector: '[app-ch-color]'
})
export class bgDirective{
constructor(private el: ElementRef, private renderer: Renderer){
this.changeColor('red');
}
@HostListener('click') foo(){
@NishuGoel
NishuGoel / bg2.directive.ts
Created July 27, 2018 16:24
import { Directive, ElementRef, Renderer, HostListener } from "@angular/core";
@Directive({
selector: '[app-ch-color]'
})
export class bgDirective{
constructor(private el: ElementRef, private renderer: Renderer){
this.changeColor('red');
}
@HostBinding('style.border') border : string;
@NishuGoel
NishuGoel / child.component.ts
Created July 27, 2018 16:40
import { Component,Input,OnInit } from '@angular/core';
@Component({
selector: 'appchild',
template: `<h2>Hi {{message}}</h2>`
})
export class ChildComponent implements OnInit{
_message: string;
constructor(){
@NishuGoel
NishuGoel / app.component.ts
Created July 27, 2018 16:44
import {Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{pmessage}}</h1>
<appchild [message]="cmessage"></appchild>
`
})
export class AppComponent {
@NishuGoel
NishuGoel / child1.component.ts
Created July 27, 2018 16:54
import { Component,Input,OnInit } from '@angular/core';
@Component({
selector: 'appchild',
template: `<h2>Hi {{message}}</h2>`
})
export class ChildComponent implements OnInit{
_message: string;
constructor(){
@NishuGoel
NishuGoel / child2.component.ts
Created July 27, 2018 16:55
import { Component,Input,OnInit } from '@angular/core';
@Component({
selector: 'appchild',
template: `<h2>Hi {{message}}</h2>`
})
export class ChildComponent implements OnInit{
_message: string;
constructor(){
@NishuGoel
NishuGoel / output1.component.ts
Created July 28, 2018 12:17
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `<button class='btn btn-primary' (click)="food()">Click me</button> `
})
export class AppChildComponent {
@Output() foo = new EventEmitter();
index = 0;
@NishuGoel
NishuGoel / index.html
Created August 7, 2018 18:13
[<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pract</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha3-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>