First, we will create a simple express server with just one route to accept file uploads. Afterward, we will create an angular application from scratch and build a beautiful file-upload component using the angular material ui-component-library. We are going to use the

Create a new application by opening a command prompt at the desired location and type:

Because we will need some complex ui-elements such as modal-windows, I decided to use the

To install this library, use this command:

To make the css of this module available in our app, we need to import it into our app's global style.css file:

Also, we are using a flexbox-design for this. To make flexbox a little bit easier to use with angular there is a library called the library like this:

To make our desired file-upload component as re-usable as possible, I decided to bundle it into a separate feature module. So let's create this DialogComponent:

The first thing we need to do is to add a file input element to our component. Continue reading

pipe( map(value = value.item), take(1) );4) Isolate API hacksNot all APIs are bullet proof — sometimes we need to add some logic in the code to make up for bugs in the APIs. pipe( map(value = value.item) );6) Clean up subscriptionsWhen subscribing to observables, always make sure you unsubscribe from them appropriately by using operators like take, takeUntil, etc. subscribe(item = this.textToDisplay = item);AfterUsing takeUntil when you want to listen to the changes until another observable emits a value:private destroyed$ = new Subject();public ngOnInit (): void { iAmAnObservable . pipe( map(value = value.item) // We want to listen to iAmAnObservable until the component is destroyed, takeUntil(this. subscribe(item = this.textToDisplay = item);}public ngOnDestroy (): void { a private subject like this is a pattern to manage unsubscribing many observables in the component. Continue reading

In this release, we can see a new exciting feature we all waited for — an improved version of the HTTP client API. Request InterceptorIf we want to register new interceptor, we need to implement the HttpInterceptor interface. The intercept method will give us the Request object and the HTTP handler and expect us to return an observable of type HttpEvent. The next.handle(req) method is invoking the underlying XHR with the new request and returns a stream of response events. Continue reading

As a convenience to our customers, we wanted to ensure that using Highcharts in an Angular project was as easy as possible. We are therefore happy to present to you our official Highcharts Angular wrapper, which is free to use (please note that using Highcharts for commercial projects require a valid license). Let’s take a quick look at the wrapper along with the included demo app. Browse to the directory for the demo code, then open the file:

Notice that the main component HighchartsChartComponent is added to the app module . Feel free to explore the code by setting up demos with different charts, and share your experience and questions in the comment area. Continue reading

Another great rule to adopt is: Encourage at least 2 other people in the challenge (“hundreders”) by commenting on or liking their work and updates on Twitter. If you are not new to coding, you can use the challenge to:Learn a new frameworkLearn a new programming languageGet a lot of practice in a specific area or problem type you decide onContribute to Open SourceGet better at refactoring code

Remember that the #100DaysOfCode challenge is designed to be taken multiple times. I often see people restarting the challenge because they’ve missed a day, or people who say they can’t do the challenge because they don’t have a whole hour to spare every day, and so on. However if, when you start the #100DaysOfCode challenge, you were to change that one belief — just decide that from now on, you are a technical person, a hacker, a computer genius in the making. If you are interested in learning to code, habit formation, self-improvement (and a bit of nerdy sci-fi and space stuff), sign up for my newsletter:💌 https://www.dotheoppo.site 💌 …subscription form is below the projects 🙂If you have questions, concerns or you are afraid the ‘coding is not for you’, DM me on Twitter and I will do my best to help! Continue reading

As we have seen in AngularJS to repeat the loop, we have to use the angular’s directive named as . As the new Angular 5 feature comes with the same functionality but its directive is named as . For previous AngularJS version we have to simply just import or linked the library in the project, but now the Angular 5 (TypeScript) has its requirements such NodeJS and Git Version Control (optional), Can be used from windows command prompt. on running the this will open up a pre build component of Angular Documentation

After installation, let’s create a component for any view but the scope of this tutorial was to learn about ngFor

Check out what are components? In AngularJS to display the data from an array as a list, we would use the directive, In Angular 5 we have the directive. Continue reading

Testing Angular DirectivesUsing HTMLElementThe GoalIn this example I wanted to show you how you can e down into the DOM to find elements in your Angular templates. Then lastly, we’re importing some basic Angular building classes that will help us create our test component. Creating the test componentSometimes we want to test a directive but we don’t need to test it on a real component. In order to do that we need to do the following:1: Get the host element2: Get the child element with the directive attribute3: Trigger a click event4: Make sure the properties on that element have changedWe can get the host element, also called the debugElement, by digging into the fixture. Then last but not least, we check the style on our paragraph element to make sure the text inside it is you’re not familiar with the HTMLElement, each element has a set of properties that you can get/set. Continue reading

Creating the required filesHere we set up the Jenkins in a docker container on the host giving it access to the docker app instance so that it can create other containers itself when running the CI/CD pipeline. Installing BlueOceanBlue Ocean is Jenkins new user-friendly brand new UI that makes it easier to handle pipelines. Integrating VCS with JenkinsYou can integrate your VCS (Github, Bitbucket etc.) repositories with Jenkins to build and deploy your projects to your host through CI/CD pipeline. You can also configure Jenkins to check regularly a particular branch of your repository and run the pipeline if some new commit is made onto that branch (We will elaborate on this in the next section). On Blue Ocean’s dashboard, go to Pipelines Tab and click Create PipelineJenkins Blue Ocean Create PipelineSelect the VCS of your repository (Login required for the first time), team/user and select the repository that you want to create the pipeline for and then hit the Create Pipeline button. Continue reading

While this was my first real exposure to Vue.js, many of the concepts discussed in the book are built on top of concepts that should be familiar to Angular developers. And, in order to test a few Vue.js features, I encapsulated two parts of the user interface inside nested components:

These two components are so-called "presentation components" that operate solely on inputs and outputs. It renders the root component into the document Body; and, it defines the name-based dependencies for subsequent dependency-injection:

While Vue.js provides dependency-injection, Vue.js doesn't appear to manage the instantiation of injectables. Now, one of the very React-like features of Vue.js is the fact that each Component renders its own host element. And, if we run this code in the browser, add a few friends and delete a few friends, we get the following output:

The total page-weight of this bundled and minified Vue.js application comes in at about 180Kb. Continue reading

So that brings us to the pattern where three Actions are required for any API call:Action to trigger the EffectAction to wrap the successful result (typically suffixed with Success)Action to reflex the error response (typically suffixed with Error)

This pattern will also become handy in some of the further improvements that I describe in this article ⬇️. Below are the two side-by-side animations of that last step showing different implementations: the one on the right uses NgRx store as a cache, displaying the previous list of products while we are waiting for the new fetch API call to complete, at the same time indicating with the indeterminate progress bar that the data might still change. Here is how it looks:no cache (left) vs cache (right) when navigating to the “product details” pageOn the left side, we are waiting for the GetProduct(id) to return the info, while on the right side we already show the partial info that we have in the Store about this product from the FetchProducts call, and once the GetProduct(id) returns us new data (including “product description”) we merge it. Here is the basic and naive implementation of how to persist the products state from/into localStore:In the productSync meta-reducer we check for two special Actions that NgRx dispatches itself:INIT — dispatched when Store is initialized (including any forFeature pieces that are not when feature reducers are added/removed. When the user clicks to add the product to the cart, we assume that it will be successful at the backend and we push this product to the Store’s cart items list immediately. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.