Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Mar 01 2019 15:36

    JohannesHoppe on master

    ngrx: breaking isolation (compare)

  • Mar 01 2019 14:17

    JohannesHoppe on master

    using plotly.js (compare)

  • Mar 01 2019 12:52

    JohannesHoppe on master

    monorepo: shared libs and apps (compare)

  • Mar 01 2019 12:00

    JohannesHoppe on master

    Buch mit caching laden! (compare)

  • Mar 01 2019 10:36

    JohannesHoppe on master

    TODO: fix me (compare)

  • Mar 01 2019 09:44

    JohannesHoppe on master

    TODO: LoadBook --> LoadBookSucc… (compare)

  • Mar 01 2019 08:48

    JohannesHoppe on master

    proper errror handling (compare)

  • Mar 01 2019 08:32

    JohannesHoppe on master

    loading books with error handli… (compare)

  • Feb 28 2019 14:34

    JohannesHoppe on master

    load books (compare)

  • Feb 28 2019 14:00

    JohannesHoppe on master

    how to handle errors cold to hot book details with async and 1 more (compare)

  • Feb 28 2019 10:38

    JohannesHoppe on master

    never do this! switchMap -> wenn nur der letzt… (compare)

  • Feb 28 2019 10:11

    JohannesHoppe on master

    rxjs: Callbacks rxjs: observer, observable, sub… (compare)

  • Feb 28 2019 08:43

    JohannesHoppe on master

    using observables with the rout… (compare)

  • Feb 28 2019 07:59

    JohannesHoppe on master

    showing thumbnails (compare)

  • Feb 28 2019 00:44

    JohannesHoppe on ngrx-tryout

    ngrx/redux: loading books (compare)

  • Feb 28 2019 00:26

    JohannesHoppe on ngrx-tryout

    Set up NgRx ng add @ngrx/store… (compare)

  • Feb 27 2019 22:57

    JohannesHoppe on master

    + rxjs-playground (compare)

  • Feb 27 2019 15:37

    JohannesHoppe on master

    routing, without RxJS (compare)

  • Feb 27 2019 14:29

    JohannesHoppe on master

    http, unsubscribing is never a … removes unessary subscription (compare)

  • Feb 27 2019 13:03

    JohannesHoppe on master

    forms: done! (compare)

Johannes Hoppe
@JohannesHoppe
hallo! :-)
Hakan Dilek
@hakandilek
Hi!
Jan Weiß
@weiss19ja
Hi ;-)
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe

Hands on!

Die Bücher sollen abwechselnd mit einem grauen/weißen Hintergrund angezeigt werden.

Marcel Klose
@marci1501

import * as Plotly from 'plotly.js';
graphDivconst gd3 = Plotly.d3.select(plotlyQuerySelectors.sensorsChart)
.append('div')
.style({
width: '98%',
height: '98%',
});
this.graphDiv = gd3.node();

export const plotlyQuerySelectors = {
spikelineXLabel: '.hoverlayer text[data-notex="1"]',
sensorsChart: '#sensors-chart',
svgContainer: '.svg-container'
};

@JohannesHoppe so sieht das bei uns aus.
Fehlt natürlich noch ein graphDiv: PlotlyHTMLElement; ;-)
Johannes Hoppe
@JohannesHoppe
<!-- book.component.html -->
<div class="card mb-4">
  <div class="card-body bg-light">
      <img class="img-thumbnail float-right"
        src="//api.angular.schule/avatar/{{ book.rating }}">
    <div class="card-title">
      <h2>
        {{ book.title }}
        <span class="badge badge-secondary">{{ book.rating }}</span>
      </h2>
    </div>
    <p>{{ book.description }}</p>

    <button class="btn btn-secondary "> - </button>
    <button class="btn btn-primary"> + </button>

  </div>
</div>
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
book.rating.service.spec.ts
import { BookRatingService } from './book-rating.service';
import { Book } from './book';

fdescribe('BookRatingService', () => {

  // Arrange
  let service: BookRatingService;
  let book: Book;
  beforeEach(() => {
    service = new BookRatingService();
    book = {
      isbn: '000',
      title: 'Test',
      description: 'Test',
      rating: 3
    };
  });

  it('should rate up a book by one', () => {
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(4);
  });

  it('should not be allowed to have a rating greater than 5', () => {
    book.rating = 5;
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(5);
  });

  it('should rate down a book by one', () => {
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(2);
  });

  it('should not be allowed to have a rating smaller than 1', () => {
    book.rating = 1;
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(1);
  });

  it('should always return a new book instance', () => {
    const ratedBook = service.rateUp(book);
    expect(ratedBook).not.toBe(book); // assuming immutability here
  });

});
Steffen Kocher
@SteffenKocher_twitter

import { Injectable } from '@angular/core';
import { Book } from './book';

@Injectable({
providedIn: 'root'
})
export class BookRatingService {

private MIN_RATING = 1;
private MAX_RATING = 5;

rateUp(book: Book) {
return {
...book,
rating: Math.min(book.rating + 1, this.MAX_RATING)
};
}

rateDown(book: Book) {
return {
...book,
rating: Math.max(book.rating - 1, this.MIN_RATING)
};
}

}

Johannes Hoppe
@JohannesHoppe
Sammy
@RFM69CW
image.png
Sammy
@RFM69CW
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[brRating]'
})
export class RatingDirective {

  @Input() set brRating(rating: number) {
    this.viewContainer.clear();
    for (let i = 0; i < rating; i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

}
.rating {
  display: inline;
}
<div class="rating" *brRating="book.rating">*</div>
Sammy
@RFM69CW
ng g d books/shared/rating
daubor
@daubor
<span class="badge badge-secondary" *ngFor="let i of [].constructor(book.rating)">*</span>
Steffen Kocher
@SteffenKocher_twitter
<ng-container *ngFor="let r of getArray(book.rating)">
          <span class="fa fa-star checked"></span>
</ng-container>
Johannes Hoppe
@JohannesHoppe
stichwort icon fonts
Johannes Hoppe
@JohannesHoppe
// e2e/src/angular.e2e-spec.ts
import { $, browser } from 'protractor';

describe('Angular Buch', () => {

  beforeAll(() => {
    browser.waitForAngularEnabled(false);
  });

  it('should be called, not AngularJS please!', () => {

      browser.get('https://www.dpunkt.de/buecher/12400/9783864903571-angular.html');
      const heading = $('h1');
      expect(heading.getText()).toEqual('Angular');
      browser.sleep(4000);
  });

  afterAll(() => {
    browser.waitForAngularEnabled(true);
  });
});
Johannes Hoppe
@JohannesHoppe
import { ReactiveFormsModule } from '@angular/forms';
Johannes Hoppe
@JohannesHoppe
<form [formGroup]="bookForm">

  <div class="form-group">
    <label for="isbn">ISBN</label>
    <input type="text" class="form-control" id="isbn">
  </div>

  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" class="form-control" id="title">
  </div>

  <div class="form-group">
    <label for="description">Description</label>
    <textarea type="text" class="form-control" id="description"></textarea>
  </div>

  <div class="form-group">
    <button class="btn btn-primary" type="submit">Create</button>
  </div>

</form>
Johannes Hoppe
@JohannesHoppe
Code automatisch generieren, für Swagger (Open Api) und GraphQL:
https://www.youtube.com/watch?v=rarXH1OHpFY
HttpClientModule nur im ins AppModule einbinden,
nicht in die Feature-Module!
Johannes Hoppe
@JohannesHoppe
📖 Blogged: "How to integrate third party libraries and widgets into 🅰️ #Angular":
https://angular.schule/blog/2019-02-third-party-libraries-and-widgets
Johannes Hoppe
@JohannesHoppe
ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/store-devtools
ng add @ngrx/schematics --defaultCollection
ng g feature books/Book --module books/books --group --api
Johannes Hoppe
@JohannesHoppe
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { State } from '../reducers/book.reducer';
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
combineReducer ngrx
effect: withLatestFrom(this.store$),
Jan Weiß
@weiss19ja
this.book$ = this.route.paramMap
      .pipe(
        map(params => params.get('isbn')),
        switchMap(isbn => this.store.pipe(select(getBookByIsbn, {isbn}))),
      );
Johannes Hoppe
@JohannesHoppe
ng generate application my-other-app
ng build my-other-app
ng serve my-other-app
ng generate library my-lib
Johannes Hoppe
@JohannesHoppe
Tipp 1: npm install plotly.js-cartesian-dist
Johannes Hoppe
@JohannesHoppe
    const myDivEl = this.myDiv.nativeElement;

    var data = [{
      values: [66, 22, 12],
      labels: ['Angular', 'React', 'Vue'],
      type: 'pie'
    }];

    var layout = {
      title: 'Top 3 Most Popular SPA Frameworks in 2019*',
      height: 400,
      width: 500
    };

    Plotly.newPlot(myDivEl, data, layout);
Johannes Hoppe
@JohannesHoppe