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…


Today we’re gonna make an angular timer. We make a timer component. This component is able to countdown time, show fixed time and clear time.

Model

Model has a couple of states. One state defines what timer should do another defines how many numbers we want to show to the user. Property “endTime” we use for countdown, “totalTime” we use for show fixed time. We are gonna use the function “setTimeout’ inside of the timer. That function returns id. This id we save in property “id”.


.Net + MQTT.

First step is to install nuget packages for mqtt. MQTTnet, MQTTnet.Extensions.ManagedClient.


Common table with nice features.

In the previous part, we created a skeleton. Our table can handle different types of data. In this part we will check if it is true and we will add new features like sorting, filtration.

Different data

In our second table we will show information about elements.


Common table for different data

Problem

In many cases the best way to show data to users is to use a table. At first you’re gonna probably copy and paste code for one table to another and adjust this table to your needs. If you will go by this path eventually you will find yourself in a project with a lot of almost the same tables. Them you will need to add one feature in all tables. This task will take a lot of time and will become a nightmare. You definitely don’t want to do this type of task.
What a solution to this problem…


Continuous integration.

It is always hard to start something new. In this article I will introduce a main concept of docker and will give you a small list of commands that you need to know.

When we run a server on linux or windows we do not need every service that we have inside this operation system (OS). We need a small version of OS without UI with a couple of services in it. This small version of OS is portable and requires fewer resources on your PC.

Basically docker is a manager of those tiny virtual machines. …


Drawing a tree is a very popular test task. There are many ways to solve this task. But the interview expects to see from you a solution with one cycle.

The task

Build Tower by the following given argument: number of floors (integer and always greater than 0).

The first picture argument is 3, the second picture argument is 6.

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