Coding

Angular 4 – What’s New?

  • 00:00:02 welcome to this video so angular 4 was
  • 00:00:05 released what changed
  • 00:00:07 what is new attached to this video you
  • 00:00:09 will find a couple of links leading to
  • 00:00:11 the official release notes and so on if
  • 00:00:13 you want to dive deeper but now let me
  • 00:00:15 guide you through it basically and
  • 00:00:17 that's the most important thing angle of
  • 00:00:19 Ford doesn't change that much some under
  • 00:00:21 the hood changes some improvements
  • 00:00:24 performance improvements but regarding
  • 00:00:26 the code you write regarding your code
  • 00:00:28 that should still all work there
  • 00:00:30 shouldn't be any braking changes and
  • 00:00:32 that is great news because that means
  • 00:00:34 that your old code should continue to
  • 00:00:36 work with angular for now why angular 4
  • 00:00:40 to begin with the name simply has
  • 00:00:42 something to do with the way we should
  • 00:00:44 look at angular the framework as a whole
  • 00:00:46 angular 2 was a complete rewrite of
  • 00:00:48 angular 1 and therefore we really talked
  • 00:00:51 about two different frameworks there now
  • 00:00:53 the angular keep decided that the future
  • 00:00:55 should just be angular and angular 1 is
  • 00:00:58 referred to as angularjs so that's a
  • 00:01:01 different framework and angular is these
  • 00:01:03 now to be used framework angular 2 is
  • 00:01:06 the first part of that angular force
  • 00:01:08 simply it's the next version and why not
  • 00:01:11 angular free well that simply happened
  • 00:01:13 because of some internal aversion and
  • 00:01:15 conflicts so they skip the version 3 and
  • 00:01:17 move to write to version 4 it also means
  • 00:01:20 that we will see angular 5 probably
  • 00:01:22 around fall this year we don't know what
  • 00:01:24 will be changed there but for now
  • 00:01:26 angular for is the latest version again
  • 00:01:28 mostly with some under the hood changes
  • 00:01:30 so since we mostly have under the hood
  • 00:01:33 changes which new features do we have
  • 00:01:36 are there any their answer is yes we do
  • 00:01:38 have some new features for example
  • 00:01:40 regarding ng F in the past with angular
  • 00:01:43 2 if you wanted to use ng if with
  • 00:01:45 multiple conditions or specifically with
  • 00:01:47 the else clause you would probably write
  • 00:01:50 it like this q ng if statements where in
  • 00:01:52 the second statement you simply check
  • 00:01:54 the opposite well with angular for you
  • 00:01:57 officially now have an else statement or
  • 00:01:59 else clause you can put into your
  • 00:02:01 engineer statement it then looks like
  • 00:02:03 this might look more complex but it is
  • 00:02:05 really simple you wrap your alternative
  • 00:02:08 content in an ng template a new
  • 00:02:10 component introduced with angular 4 and
  • 00:02:12 this should replace any template the H
  • 00:02:15 EML 5-element you used in your angular
  • 00:02:18 template so in ng template you rap
  • 00:02:21 whatever you want to display optionally
  • 00:02:23 alternatively and you put a local
  • 00:02:25 reference on the ng template and then
  • 00:02:28 you use that reference name in the else
  • 00:02:29 clause of ng F and that is a more
  • 00:02:32 convenient or I guess a more logical way
  • 00:02:35 of creating a if/else block of course
  • 00:02:37 the old way will still work and there is
  • 00:02:39 nothing wrong about using that so there
  • 00:02:41 is one new feature we have another new
  • 00:02:44 feature or some kind of a deprecated old
  • 00:02:48 feature I should say it's a new renderer
  • 00:02:50 we already have to render eyes angular
  • 00:02:52 cube it looks like this and we could for
  • 00:02:54 example use it to change the style here
  • 00:02:56 the background color of element that's
  • 00:02:59 nice and this feature generally still is
  • 00:03:01 available but the old renderer as you
  • 00:03:03 saw it here was deprecated now we have
  • 00:03:06 renderer to it mostly offers the same
  • 00:03:10 methods some change their name though
  • 00:03:12 but generally it's the same it was
  • 00:03:15 renamed because under the hood a lots
  • 00:03:17 changed so we do at that new renderer
  • 00:03:19 now important the old one will still
  • 00:03:21 work I mentioned that there won't be any
  • 00:03:23 breaking changes it simply is deprecated
  • 00:03:26 so it will be removed sometime in the
  • 00:03:28 future you may still continue using it
  • 00:03:30 it won't be removed before angular 5
  • 00:03:33 probably but if possible switch to
  • 00:03:36 render at you make sure to adjust your
  • 00:03:38 injection and your import and have a
  • 00:03:40 look at the official docs for Android
  • 00:03:42 you to find out how the methods you use
  • 00:03:44 use now our name that now works
  • 00:03:46 generally though it should work the same
  • 00:03:49 as before
  • 00:03:49 that was one deprecated and 50% new
  • 00:03:54 feature or something like that now let's
  • 00:03:56 have a look at a totally new feature and
  • 00:03:58 that is the email validator in the past
  • 00:04:02 and angular 2 if you had an input field
  • 00:04:04 which should hold the email address you
  • 00:04:05 probably use the pattern validator
  • 00:04:07 together with some regular expression to
  • 00:04:10 check wherever the user entered a valid
  • 00:04:11 email address with angular 4 there now
  • 00:04:14 as simply it's an email validator you
  • 00:04:16 can drop the email directive on your
  • 00:04:18 input when using the reactive approach
  • 00:04:20 imported use it from this validators
  • 00:04:23 class you use there for all the
  • 00:04:24 validators and you're good to go behind
  • 00:04:27 the scenes that is basically that's the
  • 00:04:28 same you
  • 00:04:29 before with the pattern validator but
  • 00:04:31 it's a more convenient way of using this
  • 00:04:32 of course the pattern validator is still
  • 00:04:34 there if you want to use it for any
  • 00:04:36 other pattern for emails this is the
  • 00:04:38 more convenient way now these are the
  • 00:04:40 most important new features we have all
  • 00:04:43 the other new features are again under
  • 00:04:45 the hood changes for example that now
  • 00:04:47 you may use typescript 2 before that
  • 00:04:50 only typescript 1.8 was supported and
  • 00:04:52 you can have a look at the typescript
  • 00:04:54 release notes to find out which new
  • 00:04:56 features typescript 2 offers and that's
  • 00:04:59 interesting for you if you want to use
  • 00:05:01 any of these new features again that's
  • 00:05:02 purely an option nothing you have to
  • 00:05:04 change here another change was as
  • 00:05:08 mentioned earlier d-flat modules which
  • 00:05:10 make importing a bit easier behind the
  • 00:05:13 scenes or specifically which allow your
  • 00:05:15 built tool to tree shake your code which
  • 00:05:17 means remove any code you don't really
  • 00:05:19 use so again under the hood improvement
  • 00:05:23 and we have some deprecations
  • 00:05:25 deprecations as mentioned earlier simply
  • 00:05:27 means these features will be removed in
  • 00:05:30 the future but not right now so you may
  • 00:05:32 continue using them and if you never
  • 00:05:34 upgrade to angular 510 well they are
  • 00:05:37 never removed so what was deprecated
  • 00:05:40 then well mostly to fix the renderer
  • 00:05:43 which I already mentioned with this new
  • 00:05:44 renderer now being available and the
  • 00:05:47 animations package now that's an
  • 00:05:49 important change prior to angular 4 so
  • 00:05:52 in angular cube you imported all the
  • 00:05:54 triggers States styles and so on so all
  • 00:05:57 these functions from at angular core now
  • 00:06:00 you do the same from add angular
  • 00:06:02 animations the general syntax didn't
  • 00:06:04 change but the way you import them
  • 00:06:06 change you have a new separate package
  • 00:06:08 for animations now now you also have to
  • 00:06:11 add a module to your F module you have
  • 00:06:14 to import it the browser animations
  • 00:06:16 module which is then imported from this
  • 00:06:18 path here from edy angular platform
  • 00:06:20 browser slash animations that is an
  • 00:06:23 average application we have and with
  • 00:06:26 that the our new features and only under
  • 00:06:29 the hood breaking changes which
  • 00:06:30 shouldn't affect your code that is
  • 00:06:33 angular 4th so as you see it for you as
  • 00:06:35 a developer not that many important
  • 00:06:38 changes which affect your code
  • 00:06:40 nice changes which should affect the
  • 00:06:43 performance and size of your application
  • 00:06:46 in the end at least once all your tools
  • 00:06:48 are ready to pick up this tree shaking
  • 00:06:50 feature ends on and therefore really a
  • 00:06:53 nice release the evolution of angular I
  • 00:06:56 guess we can really look forward to
  • 00:06:57 angle of five and fold and maybe more
  • 00:07:00 new features then we'll see but for now
  • 00:07:03 this is it key takeaways your apps
  • 00:07:05 should continue to work you don't need
  • 00:07:07 to change anything if you don't want you
  • 00:07:09 you can use the new features like the
  • 00:07:11 renderer or ngf else you don't have to
  • 00:07:14 if you use animations you may use the
  • 00:07:16 new packages the old ones still work
  • 00:07:18 that is what that brocaded means you
  • 00:07:20 definitely will need to change something
  • 00:07:22 in fall when angular 5 comes out and you
  • 00:07:24 want to upgrade to it but for angular 4
  • 00:07:27 no steps are required from your side of
  • 00:07:29 course you may upgrade or may implement
  • 00:07:34 changes I mentioned here and use the new
  • 00:07:36 feature I hope this was helpful see
  • 00:07:38 whatever videos bye