Let’s consider we have a task: to create an input element and highlight text in the paragraph, based on the user input.

The solution is quite simple: to create a pipe, that will get the searched text as an argument and will return a modified markdown based on the regular expression result.

Create component:

So, lets start with creation of the most simple component:

@Component({ 
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="searchQuery" />
<p>This is a test paragraph where we will be looking for a search string</p>
`,
})
export class App {
searchQuery: string = '';
}

At this…


On April 20, 2021 the Node.js was release with a new version — 16. It included a couple of notable changes like:

  • Engine update: V8 upgraded to V8 9.0
  • npm 7 default version
  • Toolchain and Compiler Upgrades
  • Stable AbortController implementation based on the AbortController Web API
  • Stable Timers Promises API

The whole list can be viewed in the official release notes.


Firebase — is an excellent choice for hosting Angular applications: it’s fast and secure. With just one command, you can deploy your application and serve either static or dynamic content.

Important thing to mention is that both: Angular and Firebase were created by Google, so it means that their interrelation is designed by default. Deploying single page applications, managing its assets in own CDN — everything is provided out of the box without the necessity of manual adjustments.

But what about website debugging, before going to production? Do we have an option of having a staging environment within Firebase toolkit?


When you become an adept of Angular development then *ngFor becomes probably the most used tool in your work with templates, of-course alongside with *ngIf.

Quite simple, it allows you to iterate over any collection. A standard example of displaying a list of data from component would look like:

@Component({ 
selector: 'app-product-list',
template: `
<ul>
<li *ngFor="let product of bankProducts">
<p> {{ product }} </p>
</li>
</ul>
`,
})
export class ProductList {
bankProducts: string[] = ['cards', 'deposits', 'loans'];
}

Usually, when we work with *ngFor directive, we associate it with this functionality. I some cases we remember that it…

Igor Gonchar

Senior Front-End developer in Backbase, Amsterdam

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