Coding

BehaviorSubject | RxJS TUTORIAL

  • 00:00:01 welcome to this video this video is
  • 00:00:04 about behavior subjects in rxjs I
  • 00:00:07 already do have a video about normal
  • 00:00:10 subjects and the starting code here
  • 00:00:13 which you can find a link in the video
  • 00:00:14 description I am using a normal subject
  • 00:00:17 as you can see here now
  • 00:00:19 in this setup we have a button click me
  • 00:00:22 and when we click the button we actually
  • 00:00:24 have this event listener which will emit
  • 00:00:27 a new value through our subject to which
  • 00:00:29 you subscribe here at the very bottom
  • 00:00:31 therefore we print clicked since that is
  • 00:00:34 what we do in our subscription nothing
  • 00:00:36 spectacular we're using a subject there
  • 00:00:39 is one limitation a normal subject cast
  • 00:00:42 though it doesn't have an initial value
  • 00:00:44 or a starting value if we reload this
  • 00:00:48 project waiting control enter again we
  • 00:00:50 don't see any value by default below the
  • 00:00:52 button that is because there is empty
  • 00:00:55 now obviously I could go into HTML and
  • 00:00:58 simply oops ad not clicked here and we
  • 00:01:02 would have not clicked which changes to
  • 00:01:04 clicked when we do click now we have a
  • 00:01:06 default value but it's hard-coded into
  • 00:01:08 HTML and this might not be the behavior
  • 00:01:11 you're looking for in your app an
  • 00:01:13 alternative would be to go to the end of
  • 00:01:16 our code here and simply use click omit
  • 00:01:19 it and omit a new value where we say not
  • 00:01:23 clicked
  • 00:01:23 now since the subscription is already
  • 00:01:25 setup in the free head control enter we
  • 00:01:27 see not clicked because we already have
  • 00:01:30 a subscription which will replace the
  • 00:01:32 dev text content whenever we omit a new
  • 00:01:35 value which we do here again this is
  • 00:01:38 some extra code we have to write because
  • 00:01:39 we have to manually omit a value to set
  • 00:01:42 the default at the beginning and
  • 00:01:43 technically it won't have this value
  • 00:01:46 right from the start only once we reach
  • 00:01:48 deadline so that might still not be
  • 00:01:51 optimal the great thing is rxjs has a
  • 00:01:54 special type of subject we can use the
  • 00:01:57 behavior subject so if I turn my subject
  • 00:02:00 into one a new behavior subject I now
  • 00:02:04 can pass an argument to that subject
  • 00:02:06 constructor that was not possible in a
  • 00:02:09 normal subject here I can assign a
  • 00:02:12 default value for the subject like no
  • 00:02:14 clicked if I now hit control enter you
  • 00:02:18 see not clicked appearing again even
  • 00:02:20 though we're not emitting it and we did
  • 00:02:22 not set it in the HTML code but instead
  • 00:02:25 this argument will populate our subject
  • 00:02:28 with a starting value which is
  • 00:02:30 automatically emitted you could say so
  • 00:02:32 that our subscription automatically
  • 00:02:34 triggers right it start up of course if
  • 00:02:37 I then click all the other code still
  • 00:02:40 works as expected but behavior subject
  • 00:02:43 takes care about the initialization so
  • 00:02:45 when would you use it you typically use
  • 00:02:47 it whenever you do use your subject like
  • 00:02:51 a normal variable which should hold the
  • 00:02:53 value but which you want to change
  • 00:02:55 eventually and which should then inform
  • 00:02:57 other parts of your application about
  • 00:03:00 this change that is a perfect use case
  • 00:03:02 for behavior subject I hope this video
  • 00:03:04 was helpful see you on the other videos
  • 00:03:07 hopefully body