JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Angular 2 & NgRx/store: The NgModel In Between Use Case (from Angular 1)

  • It renders the search box to the top of the class=”search-panel” form class=”navbar-form form-search navbar-left” ng-submit=”vm.search()” div class=”form-group” input placeholder=”Explore Media” type=”search” class=”form-control” class=”btn btn-transparent btn-submit” type=”submit” title=”search with echoes” i class=”fa I removed some attributes and html code to make this code simpler for this post.
  • The migration of the html code above is quite simple (I mentioned it in 3 more steps to prepare your angular 1 to angular 2) in angular 2:

    ng-model is converted to ([ngModel])
    ng-change is converted to (input)
    instead of using ng-submit, I used a simple (click) event on the search button

    Notice the ngModel is both bind with a value (using the binding [] brackets) and both syncs back to its variable (as an event with () ) – This the 2-way binding we’ve been used to from angular 1.

  • — SEARCH FORM — form class=”navbar-form form-search navbar-left” div class=”form-group” input placeholder=”Explore Media” type=”search” class=”form-control” class=”btn btn-transparent btn-submit” type=”submit” title=”search with class=”fa Youtube Videos Component Class
    To support the new search feature, the component’s class needs to be updated with:

    “searchQuery” property which will hold the search string value
    Updating the search function with the new “searchQuery”
    “resetPageToken” function which will reset the pageToken property when the search query { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from ‘@angular/core’;import { NgModel } from ‘@angular/common’import { Store} from ‘@ngrx/store’;import { YoutubeSearch } from { YoutubeList } from [YoutubeList, NgModel], changeDetection: class YoutubeVideos { videos: any; searchQuery: string = youtubeSearch: YoutubeSearch, public store: Storeany) { this.videos = () { console.log(‘playing’, media); }  resetPageToken() Youtube Search Service With a New NgRx Action
    The last change goes to the youtube search service – this is where the actual search logics happens and where NgRx/store goes into action.

  • I added a new function “resetPageToken”, which purpose is to reset the pageToken property in the configuration object that is used in the youtube search request.
  • It is also being called in the search function if a new search is request by () ”); this.store.dispatch({ type: RESET });}

    This is the result:



Angular (2+) & NgRx/store: The NgModel In Between Use Case (from Angular 1) – Oren Farhi – Javascript & Angular (2, 4) Consulting Network, Angular Developer


https://twitter.com/intent/tweet?in_reply_to=890577337368154112
https://twitter.com/intent/retweet?tweet_id=890577337368154112
https://twitter.com/intent/favorite?tweet_id=890577337368154112


https://twitter.com/intent/tweet?in_reply_to=880431749993517056
https://twitter.com/intent/retweet?tweet_id=880431749993517056
https://twitter.com/intent/favorite?tweet_id=880431749993517056


http://twitter.com/search?q=%23Angular
http://twitter.com/search?q=%23ngrx


https://twitter.com/i/web/status/868707270338785280
https://twitter.com/intent/tweet?in_reply_to=868707270338785280
https://twitter.com/intent/retweet?tweet_id=868707270338785280
https://twitter.com/intent/favorite?tweet_id=868707270338785280


http://twitter.com/search?q=%23angular
http://twitter.com/search?q=%23rxjs
https://twitter.com/intent/tweet?in_reply_to=859743262713708546
https://twitter.com/intent/retweet?tweet_id=859743262713708546
https://twitter.com/intent/favorite?tweet_id=859743262713708546


https://twitter.com/intent/tweet?in_reply_to=859079914548604929
https://twitter.com/intent/retweet?tweet_id=859079914548604929
https://twitter.com/intent/favorite?tweet_id=859079914548604929

Comments are closed, but trackbacks and pingbacks are open.