 Resources from Juri Strumpflohner in 2021

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

[Dynamic components](https://egghead.io/courses/create-dynamic-components-in-angular) aren’t always that easy, especially if you’d like to retrieve and instantiate them as part of an HTML coming from the server API. In this lesson we’re going to transform an Angular component into an Angular Element and dynamically insert it into the HTML by using the `innerHTML` property of a DOM element.

Note, if you get an error "Failed to construct 'HTMLElement': Please use the 'new' operator..", make sure to install the `@webcomponents/webcomponentsjs` polyfill and add the following `'@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';` at the end of `polyfills.ts`. I discuss this as well in the lesson.

Also check out [this GitHub issue for more infos](https://github.com/angular/angular/issues/24556).

Transform an Angular Component into a native Custom Element

Angular Elements are fully valid Custom Elements. As such, compiling them into standalone script files which can then be included as part static HTML files, even other apps using different frontend frameworks, makes it a powerful toolkit. In this lesson we’re going to explore how we can adjust the CLI compilation process to export our Angular Element into a standalone script file.

Compile an Angular Component as standalone Custom Elements

In this lesson we’re taking a look at ngx-build-plus, an open source extension of the Angular CLI that allows to tweak it’s build process with the purpose of being able to compile Angular Elements more easily.

Check out the [ngx-build-plus repository](https://github.com/manfredsteyer/ngx-build-plus) for more options.

Use ngx-build-plus to compile Angular Elements

In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s output in the form of custom events.

Communicate with Angular Elements using Inputs and Events

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

You have different teams, using different frontend technologies, but you still want to share components? In this lesson we'll learn how to leverage Angular elements to compile an Angular material form component to a reusable "custom element" and include it in an existing React app.

Use an Angular component inside a React App with Angular Elements

When you embed an Angular component inside a React app, you don't just want to listen to its output events, but also to be able to input data into the component. In this lesson we will take a look how to achieve this with Angular elements. We will also learn about some shortcomings when working with custom elements and React components.

Pass data from a React component to an Angular component with Angular Elements

When migrating AngularJS (v1.x) applications to Angular you [have different options](https://github.com/angular/ngMigration-Forum/wiki/Migration-Paths-Overview). Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Use Angular components in AngularJS applications with Angular Elements

Hi, here's a short intro to my course about Angular Elements.

The goal of this course is to learn about the new Angular Elements API provided by the Angular team. It's a pretty exciting new technology as it allows us to share our Angular components outside of Angular. This opens up a lot of new possibilities, such as fully dynamic components or even including your Angular Elements in applications built with other frameworks such as React or Vue.

So in this course we'll walk through the basics, how to create an Angular Element, compile it and how to handle input and outputs. We'll also experiment with including it in a React application, or even use it in an AngularJS (v1.x) app.

This is just the beginning as the Angular Elements API is still in its very early stages. I expect a lot of new features coming up with the next major versions of Angular.

Enjoy the course

Course Intro to Angular Elements

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

You started working like mad on a dozens of different files and totally forgot to commit in between. Now it’s difficult to find a proper, meaningful commit message right? In this lesson we’re taking a look how you can individually commit just some of your files into the repository.
_Note: This only holds if you did not yet push your changes to the remote repository_


Only commit some of my currently modified files into the repository

In order to always have a good overview of what’s going on in our repository, we use `git log`. However, the build-in git log output format is not really suitable for everyday usage. In this lesson we will create a dedicated git alias `lg` which will printout a nicely formatted `git log` list.

The example used in this video: 

```
lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --branches
```

But there are more available on the web, just search for it :)

Make my git log look pretty and readable

Gosh no, I just added all of these commits to master. They were thought to be peer reviewed first in a dedicated branch! No worries, in this lesson we’re going to see a couple of commands that will help you move your commits into a dedicated feature branch.

> Note: This only holds if you did not yet push your changes to the remote repository

Move some commits to a separate branch that I have accidentally committed to master

Usually when you develop on some feature, you create a dedicated branch that starts from your main development line, usually `master`. However, the longer you work on your feature branch, the bigger the final merge will be. In this lesson we’re going to take a look at how you can regularly update your feature branch with the latest changes by using `rebase`.

Update my feature branch with the latest changes from master

When you update your local feature branch using `git rebase`, you’re rewriting the history. As such, when trying to update your remote branch counterpart using `git pull` you will be rejected. In this lesson we’re going to have a look how to use the `--force` and `--force-with-lease` to force an update of the remote branch.

Push a rebased local branch by using `--force-with-lease`

It is a good practice to commit as often as possible while you work on your personal feature branch. That helps you trace your changes as well as to have a backup to jump back to in case something goes wrong terribly. However such git branches with dozens of commits (that may not make sense) are hard to merge and review. In this lesson we’re using an “interactive rebase” to adjust our git history.

Polish my git feature branch before merging or submitting for review

We work on our feature branch and commit a lot, also knowing we’ll have to do an interactive rebase to clean up our history once we’re done. Well, we could also automate that cleanup step to some degree, using Git’s autosquash feature. Let’s have a look.

Automate the cleanup of my feature branch with Git Autosquash

Often you have your feature branch you’ve been working on and once it’s ready, you just want it to merge into master as a single commit. You don’t care about all the single commit messages as they may not be relevant. There’s a nice “autosquash” feature in git which we’ll use in this lesson.

Squash all of my commits into a single one and merge into master

Did you make a typo in your last commit message? No problem, we can use the `git --amend` command to change it very easily.
_Note: This only holds if you did not yet push your changes to the remote repository_


Change the commit message of my last commit

You committed your work to the repository and just realized that you’ve forgotten to include some of the files. Let’s see how we can fix that by leveraging `git --amend` to include the missing files as well.
_Note: This only holds if you did not yet push your changes to the remote repository_


Add a file I’ve forgotten to add to my last commit

When you accidentally committed some changes to your branch you have various possibilities to “undo” that operation and add some more changes. One is to use `git amend` to change the commit message or add new files. But what we want to take out all of the committed changes again and maybe even split them into separate commits. Let’s see how we can achieve that.
_Note: This only holds if you did not yet push your changes to the remote repository_


Undo my last commit and split it into two separate ones

If you want to permanently remove  a commit from your branch we can use the `git reset` feature. Let’s have a look.

Wipe a commit from my local branch

If we pushed our changes already to the remote repository we have to pay attention to not change the git history  (using commands like rebase, reset, amend etc). Other collaborators of the same repository might already have pulled your changes, thus resulting into horrible, strange merge conflicts if we change the git history. There are some “safer commands” for undoing in such cases.

Topics

Instructors

Content Type

Free or Pro