Работа с Angular2

import { Component } from '@angular/core'; 
import { Link } from './linksArr'; 
import { LINKS } from './links/links.component'; 
import { LinksComponent } from './links/links.component'; 
 
@Component({ 
  selector: 'my-app', 
  template: ` 
<h1>{{title}}</h1> 
  <linkaAdder-app></linkaAdder-app> 
    <app-links></app-links> 
   
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  title = 'My favorite links'; 
}

import { Injectable } from '@angular/core'; 
import { LinkListStoregeService } from './link-list-storege.service'; 
@Injectable() 
export class LinkListService { 
 
  private linkList = [ 
    { titleL: 'habrahabr', link: 'https://habrahabr.ru/' }, 
    { titleL: 'facebook', link: 'https://www.facebook.com/' }, 
    { titleL: 'w3school', link: 'https://www.w3schools.com' }, 
    { titleL: 'angular', link: 'https://angular.io/' }, 
    { titleL: 'github', link: 'https://github.com/' }, 
  ]; 
 
  constructor( private storage: LinkListStoregeService) { } 
 
  getLinkList() { 
    return this.storage.get(); 
  } 
  addItem(item) {  
    return this.storage.post(item);  
  } 
  removeItem(item) { 
    return this.storage.destroy(item); 
  } 
  likeItem(item, classN){ 
    console.log(item); 
    console.log(classN); 
    return this.storage.like(item, classN); 
  } 
}

import { Injectable } from '@angular/core'; 
const storageName = 'aah_link_list'; 
const defaultList = [ 
  { titleL: 'habrahabr', link: 'https://habrahabr.ru/' }, 
  { titleL: 'facebook', link: 'https://www.facebook.com/' }, 
  { titleL: 'w3school', link: 'https://www.w3schools.com' }, 
  { titleL: 'angular', link: 'https://angular.io/' }, 
  { titleL: 'github', link: 'https://github.com/' }, 
]; 
@Injectable() 
export class LinkListStoregeService { 
  private linkList; 
  constructor() { 
    this.linkList = JSON.parse(localStorage.getItem(storageName)) || defaultList; 
  } 
  /** 
   * get items 
   * @returns {any[]} 
   */ 
  get() { 
    return [...this.linkList]; 
  } 
  /** 
    * Add a new todo item 
    * @param item 
    * @returns {any[]} 
    */ 
 
  /** 
  * Syncronize the local storage with the current list 
  * @returns {any[]} 
  */ 
  private update() { 
    localStorage.setItem(storageName, JSON.stringify(this.linkList)); 
 
    return this.get(); 
  } 
  /** 
   * Add a new todo item 
   * @param item 
   * @returns {any[]} 
   */ 
  post(item) { 
    this.linkList.push(item); 
    return this.update(); 
  } 
  /** 
     * find the index of an item in the aray 
     * @param item 
     * @returns {number} 
     */ 
  private findItemIndex(item) { 
    return this.linkList.indexOf(item); 
  } 
 
  /** 
   * Update an existing item 
   * @param item 
   * @param changes 
   * @returns {any[]} 
   */ 
  put(item, changes) { 
    Object.assign(this.linkList[this.findItemIndex(item)], changes); 
    return this.update(); 
  } 
 
  // remove an item 
  destroy(item) { 
    this.linkList.splice(this.linkList.indexOf(item), 1); 
    return this.update(); 
  } 
  like(item, classN){ 
    console.log(item); 
    console.log(classN) 
    this.linkList.item.classList.toggle(classN); 
    return this.update(); 
  } 
}

import { Component, OnInit } from '@angular/core'; 
import { Link } from '../linksArr'; 
import { AppComponent } from '../app.component'; 
import { LinkListService } from '../link-list.service'; 
 
 
export const LINKS: Link[] = [ 
  { titleL: 'habrahabr', link: 'https://habrahabr.ru/' }, 
  { titleL: 'facebook', link: 'https://www.facebook.com/' }, 
  { titleL: 'w3school', link: 'https://www.w3schools.com' }, 
  { titleL: 'angular', link: 'https://angular.io/' }, 
  { titleL: 'github', link: 'https://github.com/' }, 
]; 
 
@Component({ 
  selector: 'app-links', 
  template: ` 
  <div> 
    <ul class="links"> 
      <li  *ngFor="let link of links" 
        [class.selected]="link === selectedLink"> 
        <div class="title"> 
          <span class="badge">{{link.titleL}}</span>  
          {{link.link}} 
        </div> 
        <button (click)="likeItem(link)" class="btn like">Like</button> 
        <button (click)="onSelect(link)" class="btn change">Change</button> 
        <button (click)="removeItem(link)"class="btn del">X</button> 
      </li> 
    </ul> 
  </div> 
  <div *ngIf="selectedLink"> 
    <h2>{{selectedLink.titleL}} details!</h2> 
    <div><label>title: </label> 
    <input [(ngModel)]="selectedLink.titleL" placeholder="title"/> 
  </div> 
  <div> 
    <label>link: </label> 
    <input [(ngModel)]="selectedLink.link" placeholder="link"/> 
  </div> 
  </div> 
  `, 
  styleUrls: ['./links.component.css'] 
}) 
export class LinksComponent implements OnInit { 
 
  constructor(private linkListService: LinkListService) { } 
 
  ngOnInit() { 
    this.links = this.linkListService.getLinkList(); 
  } 
 
  links = LINKS; 
  selectedLink: Link; 
 
  onSelect(link: Link): void { 
    this.selectedLink = link; 
  } 
   
  removeItem(item) { 
    this.links = this.linkListService.removeItem(item); 
  } 
  likeItem(item) { 
    console.log(item); 
    let classN =  'link'; 
    this.links = this.linkListService.likeItem(item, classN); 
  } 
}

import { Component } from '@angular/core'; 
import { LINKS } from '../links/links.component'; 
import { LinkListService } from '../link-list.service'; 
@Component({ 
  selector: 'linkaAdder-app', 
  template: `<div class="inputAdd"> 
    <input name="Link.titleL" #inputTitleL placeholder="title"> 
    <input name="Link.link" #inputLink placeholder="link"> 
    <button (click)="addLink(inputTitleL.value, inputLink.value)">Save</button> 
  </div>`, 
  styles: [ 
    `.inputAdd{ 
      display: flex; 
      flex-direction: column; 
      justify-content: space-between; 
      width: 15em; 
      height: 5em; 
    } 
  ` 
  ] 
}) 
 
export class LinksAdderComponent { 
  links = LINKS; 
  constructor(private linkListService: LinkListService){} 
  ngOnInit() { 
    this.links = this.linkListService.getLinkList(); 
  } 
  addLink(title, link): void { 
    let newLink; 
    console.log(link); 
    if (link.startsWith('https://') || link.startsWith('http://')) { 
      newLink = link; 
    }else{ 
      newLink = `http://${link}`; 
    } 
    this.links = this.linkListService.addItem({titleL: title, link: newLink}); 
  } 
}