codewithtkssharma tkssharma

🎯

only JS

I am Publisher, Trainer & Developer #JavaScript, #NodeJS #AngularJS, #react, and #code #server/client side :) #k8s, #AWS, #docker

tkssharma / youTube parent component

Created October 5, 2017 04:04

	export default class Youtube implements OnInit {
	Videos : video[];
	loaded : boolean;
	API_KEY : string;
	selectVideo : video;
	opts : any;
	constructor() {

	}
	ngOnInit() {

tkssharma / search Bar

Created October 5, 2017 04:05

	import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

	@Component({
	selector: 'search-bar',
	template: '<div class="search-bar" > <input [(ngModel)]="searchText" (change)="handleChange()" /></div>'
	})

	export default class SearchBar implements OnInit {
	@Output() searchTextChange = new EventEmitter();
	searchText: string;

tkssharma / youtube component html

Created October 5, 2017 04:09


	<ng-loader [loaded]="loaded"></ng-loader>
	<search-bar (searchTextChange)="SearchValueChange($event);"></search-bar>
	<div class="container">
	<div class="left">
	<video-detail [selectVideo]="selectVideo"></video-detail>
	</div>
	<div class="right">
	<video-list [Videos]="Videos"></video-list>
	</div>

tkssharma / video list and details

Created October 5, 2017 04:10

tkssharma / React Router

Created October 7, 2017 03:23

	import ReactDOM from 'react-dom'
	import React from 'react'
	import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
	import { Home, BasicRouting, Blocking } from './Components'

	ReactDOM.render(
	<BrowserRouter>
	<div>
	<ul>
	<li><NavLink to="/" activeClassName="active">Home</NavLink></li>

tkssharma / parent routes

Created October 7, 2017 03:47

	<BrowserRouter>
	<div>
	<ul>
	<li><NavLink to="/" activeClassName="active">Home</NavLink></li>
	<li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
	<li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
	<li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
	<li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
	<li><NavLink to="/recursive-paths" activeClassName="active">Recursive Paths</NavLink></li>
	</ul>

tkssharma / BasicRouting React router V4

Created October 7, 2017 03:50

	export default class BasicRouting extends Component {
	render() {
	return (
	<div>
	<h1>BasicRouting</h1>
	<div className="leftNavi">
	<ul>
	<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
	<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
	</ul>

tkssharma / Query param : Router V4 React

Created October 7, 2017 03:55

	render() {
	const { location, pattern, match, isExact } = this.props
	return (
	<div>
	<h1>Reading the query parameters.</h1>
	<div className="leftNavi">
	<ul>
	<li><Link to={{
	pathname: match.url+'/level1',
	search: '?abc=23'

tkssharma / search Bar Angular 2 App

Created October 7, 2017 11:59

	import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

	@Component
	({
	selector: 'search-bar',
	template: '<div class="search-bar" ><input [(ngModel)]="searchText" (change)="handleChange()" /></div>' .
	})

	export default class SearchBar implements OnInit {
	@Output() searchTextChange = new EventEmitter();

tkssharma / Youtube root Componet : angular 2

Created October 7, 2017 12:09

	@Component({selector: 'youtube', templateUrl: './youtube.html'})

	export default class Youtube implements OnInit {
	Videos : video[];
	loaded : boolean;
	API_KEY : string;
	selectVideo : video;
	opts : any;
	constructor() {

	@Component({
	selector: 'video-list',
	templateUrl: 'video-list.html'
	})

	class VideoList implements OnInit {
	@Input() Videos:video[] ;
	ngOnInit(){
	console.log(this.Videos);
	}