Every website contains variable information for users. Some users may find it useful to save this information on their computers. That means we need to give the user the ability to download information in a file then upload it on our website and show it. How we can do that?

To save a file we need to create three inputs (filename, content, and extension). When a user clicks on the “save file” button we create a blob file and invisible link. …

OpenId connect

Every website has closed resources. In order to get those resources, users must have the rights to do it. That means our website must have an authentication flow. In this article, we implement OpenId Connect/OAuth2 in an angular project.

In this article, we cover only the front-end part. But the front end can not exist without the back end. Our server must have an implementation of an OpenID connect. When the server-side is ready it’s time to set up a front-end part.

First thing first, we need to install an oidc client. …

SASS preprocessor

A lot of time you can see that one application uses different clients. It is the same application but styles are different. You probably think about how it is working?

The plan is simple. First step: create a template style that will take a parameter with a set of variables. Second step: create a bunch of files with variables that will define our theme.

Let’s create a small component.

Angular 12

The developer always google stuff to find guides. If you type update angular you probably will find this website. According to that website, we need to run commands:

ng update @angular/core@12 @angular/cli@12

if we use angular material we need to run:

ng update @angular/material

And update typescript if it is necessary.

But what about other packages in the application? We probably need to update them too. How can we do that? Well, we can update them manually. If we have only 5 packages it’s not a big deal. But in real projects, we have much more.

It’s better to find…

Angular HTTP interceptors.

Sometimes we may need to add information in requests, or change the format of responses, or just make logging of all our requests. How can we do that?

We can make a base service, put logic there, then use inheritance. But angular has a great solution for this type of problem. It calls interceptors. Interceptors intercept every request in our application that gives us the ability to change the request/response or just do debugging.

Let’s create an HTTP interceptor. Our class must implement an interface HttpInterceptor with method intercept and we need to add this service in a module —…

Probably every website has a back button. How should this button work? Basically, when we get a new URL address we get a new page, this URL saves in browser history. Using this history we can go back and forth. What about spa applications like angular? Most of the time in angular we have a static route but we change the inner component on the current page.

It will be good to have a back button on our website. What can we do? Standard browser history will not work for us. We can write our own service that will listen…

Angular templates

What if we can create a component and put any content in it. How is this going to work? We create the main component (skeleton) and change the inner content without changing the main component. This approach gives us a lot of benefits.

In angular, this feature calls templates. We gonna use three items: ng-template, ng-container, and ngTemplateOutlet.

Let’s make a small example and we will go through all of those items.

First, we create a header. Ng-container is the place where we will see an ng-template. NgTemplateOutlet is a link on the ng-template item. …

What if you created a good component but next month your client came and required that component to work with different data types. Of course, you can create the same component with the same logic but what if you find a bug in one of those components, it is not good to have two versions of the same components. Instead, you can add another field and check if one field is empty, which means we need to use a second field. It seems like a good solution but the requirement always changes, which means you will have one component with…

Angular example

CSS grid layout is an approach of placing a html code in a grid by using a css style. Basically we create a grid and fill it with our content.

In this article we are going to talk about rxjs library and what we can archive using the rxjs library. I will describe the most common use rxjs operators. I will use rxjs in angular project for this we need to install rxjs by using command — npm install rxjs.

Start point is operators of, from and range. Using those operators we can create our own observables. Of operator can work with a sequence of objects. From operator can iterate in an array. Range obviously creates a range.

Next is last, first, and take. Those operators we need to put…

Yurii Kuznietsov

Full-stack developer. In my work I use Angular and C#. In free time I write articles for my blog http://tomorrowmeannever.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store