philipszdavido

//src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { VotelinkComponent } from './components/votelink/votelink.component';
import { LinkComponent } from './components/link/link.component';
import { LinktextComponent } from './components/linktext/linktext.component';
import { PointsComponent } from './components/points/points.component';
import { AddlinkComponent } from './components/addlink/addlink.component';

philipszdavido

//src/app/app.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store'
import * as fromArticle from './redux/reducer'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

philipszdavido

//src/app/app.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store'
import * as fromArticle from './redux/reducer'
import * as fromAction from './redux/actions/articles'

philipszdavido

//src/app/app.component.ts
constructor(private store: Store<fromArticle.State>){
    this.store.dispatch(new fromAction.AddArticleAction({id:1,link:'http:angular.io',title:'Angular',points:0}))
    this.store.select(fromArticle.getArticles).subscribe(v => {
      console.log(v)
    })
  }

philipszdavido

//src/app/components/votelink/votelink.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-votelink',
  templateUrl: './votelink.component.html',
  styleUrls: ['./votelink.component.css']
})
export class VotelinkComponent implements OnInit {

philipszdavido

//src/app/components/votelink/votelink.component.html
<ul class="list-inline">
    <li><a (click)="upVoteArticle($event)" href="javascript:void(0);" class="link-black btn btn-sm btn-success"><i class="fa fa-thumbs-o-up margin-r-5"></i> Upvote</a></li>
    <li><a (click)="downVoteArticle($event)" href="javascript:void(0);" class="link-black btn btn-danger btn-sm"><i class="fa fa-thumbs-o-down margin-r-5"></i> Downvote</a>
    </li>
    <li class="pull-right">
        <app-points [points]='points'></app-points>
    </li>
</ul>

philipszdavido

@Input() points: number

philipszdavido

@Output() upvote = new EventEmitter()
  @Output() downvote = new EventEmitter()

  upVoteArticle = () => {
    this.upvote.emit()
  }

  downVoteArticle = () => {
    this.downvote.emit()
  }

philipszdavido

<li><a (click)="upVoteArticle($event)" href="javascript:void(0);" class="link-black btn btn-sm btn-success"><i class="fa fa-thumbs-o-up margin-r-5"></i> Upvote</a></li>
    <li><a (click)="downVoteArticle($event)" href="javascript:void(0);" class="link-black btn btn-danger btn-sm"><i class="fa fa-thumbs-o-down margin-r-5"></i> Downvote</a>
    </li>

philipszdavido

//src/app/components/linktext/linktext.component.html
<div class="user-block">
    <a href="javascript:void(0);">{{titletext}}</a>
    <div>Shared publicly - 7:30 PM today</div>
</div>
<!-- /.user-block -->
<p>
    ({{linktext}})
</p>