Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Pass Template Input Values to Reducers

    John LindquistJohn Lindquist

    Angular allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.

    angularAngular
    2 - 6
    ngrx-store@ngrx/store
    rxjsRxJS
    5 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 To clean this up a little bit, let's go ahead and since we're just taking an action and dispatching an action, we can just go ahead and call this "Store Dispatch." Bind store. We'll just use it as the callback, meaning whatever gets passed into subscribe will just be dispatched to the store. I'm also going to pull out my click map two from here. I'll drop it up here because it makes more sense to do this at declaration when I'm actually assigning it.

    00:29 I'm also going to move this observable up into another field declaration. We'll just call it "Seconds." And then clean these up with some new lines. Now what this read before, now it's just this clicks and this seconds. Now it simply reads a little bit better.

    00:51 What I want to do is be able to send a different value other than four through whenever I click on something. If I have something like an input and it's a number input, then we'll just go ahead and give this a default value of zero. I want to send whatever is in this input through to the click. Then we can just do that with a ref here.

    01:14 I'll call this "Input Num." Then we'll pass along inputnum.value whenever this is clicked. What I have to do now is change my map two because map two just takes an object, whereas map takes a function where this value is this value that's being passed into next. With map two, you can't pass along values, but with map, you can.

    01:45 This function right now is returning an object. If you just return an object from an arrow function, you do have to wrap that in parens or else it will think this is the function block. But we want it to be an object. Now we want to take this value and assign that to the payload, but also because this is going to come through as a string and not a number. We will want to parse it or number it just to convert it from a string into a number.

    02:11 Now when I refresh, you'll see my clock is ticking along as normal three seconds at a time like we had before. Then when I click update, the hours aren't changing. But if I increment this to one and I click update, the hours update by one. If I increment this to two, you see they go up by two. They'll go all the way up to eight. You can see we update by eight hours each time I click.

    Discuss

    Discuss