DEV Community: Tomasz Flis

I'm Building a LinkedIn Alternative for Developers (And Sharing Everything I Learn)

Tomasz Flis — Tue, 02 Dec 2025 08:20:00 +0000

The Problem I Can't Ignore

You know that feeling when you open LinkedIn and see another "I'm humbled to announce..." post? Or someone turning a simple job change into a 12-paragraph hero's journey?

Yeah, me too.

As developers, we're not great at the corporate networking thing. We want to show our work, share our side projects, maybe find some freelance gigs—but without the performative professionalism that makes LinkedIn feel like a never-ending job interview.

So I'm building Brand Builder - a personal branding platform designed specifically for people in tech who want to showcase their work without the corporate cringe.

Current status: Collecting emails for early access. MVP launches in a few weeks. I'm documenting the entire journey.

What It's Going to Be

Think of it as a middle ground between:

LinkedIn (too corporate, no personality)
A custom portfolio site (time-consuming, low discoverability)
Twitter/X (chaotic, not designed for professional showcase)

Planned features for MVP:

Customizable profile pages with themes that don't look generic
Achievement tracking (projects, certs, talks, OSS contributions)
Built-in analytics (who's viewing your profile, where they're coming from)
Searchable directory so people can actually find you
One shareable link: brand-builder.io/username

The Tech Stack (And Why I Chose It)

Next.js 14 + App Router

Going with the App Router because I want to learn it properly while building something real. RSCs are perfect for this - profile pages will be mostly static, so SSG will make them blazing fast.

MySQL + Prisma

I know Postgres is the cool kid, but I'm more comfortable with MySQL from past projects. Prisma gives me the type safety and migration tools I need, and it works beautifully with both.

The schema is designed for scale from day one:

// Key models so far
model User {
  id            String   @id @default(cuid())
  email         String   @unique
  emailVerified DateTime?
  password      String?  // Hashed with bcrypt
  createdAt     DateTime @default(now())
  profile       Profile?
}

model Profile {
  id              String   @id @default(cuid())
  userId          String   @unique
  username        String   @unique
  displayName     String
  headline        String?
  bio             String?  @db.Text
  theme           String   @default("minimal")
  viewCount       Int      @default(0)

  achievements    Achievement[]
  profileViews    ProfileView[]

  @@index([username])
}

model Achievement {
  id          String   @id @default(cuid())
  profileId   String
  type        String   // PROJECT, CERTIFICATION, AWARD, etc.
  title       String
  description String?  @db.Text
  date        DateTime
  link        String?
  isFeatured  Boolean  @default(false)

  profile     Profile  @relation(fields: [profileId], references: [id])

  @@index([profileId])
}

NextAuth.js (Auth.js v5)

For authentication. Planning to support:

Email/password (with verification)
GitHub OAuth (obvious fit for devs)
Google OAuth (for broader reach)

Coolify for Deployment

Here's where I'm going against the grain. Instead of Vercel, I'm deploying to a custom VPS using Coolify. Why?

What is Coolify? It's like having your own Heroku/Vercel/Netlify on a VPS. Open source, self-hosted, and handles all the DevOps complexity (SSL, reverse proxy, database management, monitoring) through a nice UI.

Why Coolify over Vercel?

Cost control - Predictable $20/month VPS vs. unpredictable serverless costs
Learning - Understand the full stack without manual Nginx/Docker configs
Control - Direct access to everything (logs, DB, file system) when I need it
Flexibility - Easy to add Redis, background jobs, cron tasks, etc.

Why Coolify over manual VPS setup?

SSL certificates automatic (Let's Encrypt)
Zero-downtime deployments built-in
Database backups automated
Monitoring and logs in one place
GitHub/GitLab integration for auto-deploys

It's the sweet spot between "too complex" (manual Docker/Nginx) and "too abstracted" (serverless platforms where you don't know what's happening).

Deployment Architecture

GitHub Push → Coolify Webhook → Build Docker Image → 
Deploy to VPS → Health Check → Switch Traffic

Coolify handles:

Building the Next.js app
Running Prisma migrations
Managing MySQL container
Reverse proxy with automatic SSL
Rolling deployments with health checks

I just push to main and it deploys. Simple.

The Interesting Technical Decisions

1. Username Validation That Works as URLs

Usernames become URLs (brand-builder.io/username), so validation is critical. Here's what I landed on:

export const usernameSchema = z
  .string()
  .min(3, 'Username must be at least 3 characters')
  .max(30, 'Username must be less than 30 characters')
  .regex(/^[a-z0-9-]+$/, 'Only lowercase letters, numbers, and hyphens')
  .regex(/^[a-z0-9]/, 'Must start with a letter or number')
  .regex(/[a-z0-9]$/, 'Must end with a letter or number')
  .refine((val) => !val.includes('--'), 'No consecutive hyphens')
  .refine((val) => !RESERVED_WORDS.includes(val), 'Username not available');

The RESERVED_WORDS array includes things like api, dashboard, admin, etc. to prevent route conflicts. Took me a minute to realize this was necessary—testing saved me from a nasty bug.

2. Privacy-First Analytics Design

I want users to know who's viewing their profile, but without being creepy. My approach:

// Conceptual design - not implemented yet
async function trackProfileView(username: string) {
  const headersList = headers();
  const ip = headersList.get('x-forwarded-for') || 'unknown';

  // Hash the IP + salt for privacy
  const hashedIp = crypto
    .createHash('sha256')
    .update(ip + process.env.ANALYTICS_SALT)
    .digest('hex');

  // Store only the hash, never the actual IP
  await prisma.profileView.create({
    data: {
      profileId: profile.id,
      hashedIp,
      userAgent: headersList.get('user-agent'),
      referrer: headersList.get('referer'),
      viewedAt: new Date()
    }
  });
}

This gives users analytics (unique views, referrers, trends) without me storing personally identifiable information. Can track unique views by hashed IP, but can't reverse engineer who they are.

3. Markdown Support + Sanitization

Users will write bios and achievement descriptions in Markdown. Great for flexibility, but security is critical:

import { remark } from 'remark';
import html from 'remark-html';
import sanitizeHtml from 'sanitize-html';

export async function parseMarkdown(markdown: string) {
  const processed = await remark()
    .use(html)
    .process(markdown);

  return sanitizeHtml(processed.toString(), {
    allowedTags: ['p', 'br', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'code', 'pre'],
    allowedAttributes: {
      'a': ['href', 'title', 'target', 'rel']
    },
    transformTags: {
      'a': sanitizeHtml.simpleTransform('a', {
        rel: 'noopener noreferrer',
        target: '_blank'
      })
    }
  });
}

Never trust user input. Even from developers. Especially from developers.

4. Theme System Architecture

Planning to launch with 3 themes: Minimal, Bold, and Creative.

The approach: CSS variables + Tailwind classes for easy theming:

// Theme configuration
const themes = {
  minimal: {
    '--color-primary': '#3B82F6',
    '--color-bg': '#FFFFFF',
    '--font-family': 'Inter, sans-serif',
    '--layout': 'centered'
  },
  bold: {
    '--color-primary': '#EC4899',
    '--color-bg': '#F9FAFB',
    '--font-family': 'Space Grotesk, sans-serif',
    '--layout': 'wide'
  },
  creative: {
    '--color-primary': '#10B981',
    '--color-bg': '#0F172A',
    '--font-family': 'Poppins, sans-serif',
    '--layout': 'asymmetric'
  }
};

Users can switch themes from their dashboard, and the public profile updates instantly. Planning to add custom accent color selection too.

What I'm Learning as I Build

1. Scope Creep is Real

I keep wanting to add features. Every day I think "oh, what about X?"

Had to force myself to define MVP clearly:

✅ Profiles with achievements
✅ 3 themes
✅ Basic analytics
❌ Social features (later)
❌ Custom domains (later)
❌ Resume export (later)

Ship first, iterate based on real feedback.

2. Design Takes Longer Than Code

I've spent more time in Figma than VSCode so far. Getting the UX right is crucial—this is a product about presentation, after all.

Still iterating on the profile layouts. Want them to feel personal but not chaotic.

3. MySQL Indexing Strategy

Planning indexes upfront this time (learned the hard way on past projects):

model Profile {
  // ...
  @@index([username])  // Profile lookups by URL
}

model Achievement {
  // ...
  @@index([profileId, date])  // Sorted achievement lists
}

model ProfileView {
  // ...
  @@index([profileId, viewedAt])  // Analytics time-series queries
}

Better to have them from day one than add them when things get slow.

4. Coolify Makes Self-Hosting Actually Viable

Honestly, Coolify was a game-changer. I was ready to deal with Docker Compose files and Nginx configs, but Coolify abstracts all that while still giving me control.

Set up took maybe 30 minutes:

Spin up VPS (I used OVH, €20/month)
Install Coolify (one command)
Connect GitHub repo
Configure environment variables
Deploy

Now every push to main auto-deploys. I get logs, metrics, and can easily add Redis or any other service when needed.

If you're considering self-hosting but intimidated by DevOps, check it out.

5. Building in Public is Scary

Putting this out there before it's "perfect" feels weird. But I've seen too many side projects die in private development hell.

So here we are. Imperfect, in-progress, and hopefully useful.

Current Status

What's done:

✅ Database schema designed
✅ Landing page live at brand-builder.io
✅ Waitlist email collection working
✅ Core architecture decisions made
✅ Design system in Figma
✅ Coolify deployment pipeline configured

What's next (next 4-5 weeks):

🚧 Authentication system
🚧 Profile creation flow
🚧 Achievement CRUD
🚧 First theme implementation
🚧 Analytics tracking

Launch target: Early January, starting with first ~50 users from waitlist.

Why I'm Sharing This

Two reasons:

Accountability - Public commitment means I actually have to ship
Learning - You all have way more experience than me. I want your feedback.

I'm not pretending to be an expert. I'm a developer building something I wish existed, and documenting what I learn along the way.

Questions for the Community

Technical:

Anyone else using MySQL + Prisma? How's the DX compared to Postgres?
Best practices for profile view analytics that respect privacy?
Should I self-host images or use S3/R2 from day one?
Other Coolify users here? What's your experience been?

Product:

What would actually make you use something like this over LinkedIn?
What features matter for MVP vs "nice to have later"?
Would you pay for premium features? What would be worth paying for?

Join the Waitlist (If This Sounds Useful)

If you're tired of LinkedIn or just want a simple way to showcase your tech work without the corporate theater, I'd love your feedback: brand-builder.io

Early users will:

Get access first (before public launch)
Help shape what features get built
Get premium features free for 6 months

No spam, no BS. Just updates on the build and early access when it's ready.

Current tech stack:

Next.js 14 (App Router)
React 18 + TypeScript
MySQL + Prisma ORM
NextAuth.js (planned)
Tailwind CSS
Coolify for deployment
VPS (Hetzner €5/month)

Building in public:

Updates on X: here
Updates on LinkedIn: Here

The real ask: If this sounds interesting, join the waitlist and tell me what you'd actually use. I'm building this for real people with real problems, not for the sake of building.

And if you're building something similar or adjacent, let's connect. Always happy to chat about the journey, share learnings, or just commiserate about scope creep.

P.S. - If you made it this far, here's what I'm wrestling with this week: Should I launch with basic profiles and iterate fast, or nail the theme system first so the first impression is strong? Drop your thoughts below.

P.P.S. - Shoutout to Coolify for making self-hosting accessible. If you're tired of serverless bills but don't want to become a DevOps engineer, check it out.

Angular content projection - how to project views

Tomasz Flis — Sat, 19 Aug 2023 16:23:10 +0000

Introduction

The angular framework is used to develop single-page applications. Its views are a combination of components, including the smallest one, like, for example, buttons up to whole pages. Content projection is a technology that allows us to project one component into another. This article is about how we can project and conditionally display parts of the view into other ones.

Ng-content

ng-content is the mostly used angular feature to nest components. The easiest example would be:

<app-parent>
    <p>I will be nested!</p>
</app-parent>

And template of AppParent:

<div class="wrapper">
    <ng-content></ng-content>
</div>

So the end result will be:

<app-parent>
    <div class="wrapper"><p>I will be nested!</p></div>
</app-parent>

We can have more than one ng-content element in our component, and we can distinguish their usage by adding a select attribute to it with the query selector as a value.
Example usage:

<div class="wrapper"><ng-content></ng-content></div>
<div class="wrapper-2">
   <ng-content select=".for-second-wrapper"></ng-content></div>

And then we can use it:

<app-parent>
    <div class="wrapper"><p>I will be nested!</p></div>
    <div class=".for-second-wrapper">
        <p>I will be as next!</p>
    </div>
</app-parent>

So the result will be:

<app-parent>
    <div class="wrapper"><p>I will be nested!</p></div>
    <div class="wrapper-2">
       <div class=".for-second-wrapper">
           <p>I will be as next!</p>
       </div> 
    </div>
</app-parent>

NgIf, NgFor, NgSwitch

Sometimes we want to conditionally display one or another content. To do that, we can use the ngIf directive. As a value, it expects a boolean set to true displays content and removes it from the DOM when the value is false. An example of usage can be:

<p *ngIf="isLoggedIn">I am logged in!</p>

And with the value:

isLoggedIn = true;

In Angular, a special HTML element can be used to keep content and display it in other places. That element is ng-template. It can be used with the combination of ngIf to display when the value is false. According to the above example:

<p *ngIf="isLoggedIn; else notLoggedIn">I am logged in!</p>
<ng-template #notLoggedIn>
    <p>I am NOT logged in!</p>
</ng-template>

#name_of_element like #notLoggedIn is a template reference that can be used to select concrete HTML elements.

We can use the ngFor directive to display the list of elements. The example:

<ul>
   <li *ngFor="let user of users">{{user}}</li>
</ul>

And the ts:

users = ['John', 'Tom', 'Merry'];

It iterates through provided lists and puts each item under the variable. The result above will be:

<ul>
   <li>John</li>
   <li>Tom</li>
   <li>Merry</li>
</ul>

To access the index of each element, we can use the index variable:

<ul>
   <li *ngFor="let user of users; let i = index">
      {{user}}
   </li>
</ul>

There are also boolean variables named odd and even, which can make a difference between the following items on the list.
We can use variables with the respective names first and last to check if the given item is first or last.
A combination of all the above could be:

<ul>
   <li *ngFor="let user of users; let i = index; let first = first; let last = last; let odd = odd; let even = even">
      {{user}}
      <p *ngIf="first">I am first</p>
      <p *ngIf="last">I am last</p>
      <p *ngIf="odd">I am odd</p>
      <p *ngIf="even">I am even</p>
   </li>
</ul>

Similar to JavaScript, we can use switch. In HTML, it is a combination of ngSwitch and ngSwitchCase, for example:

    <div [ngSwitch]="userType">
        <div *ngSwitchCase="'ADMIN'">
            I am ADMIN
        </div>
        <div *ngSwitchCase="'MODERATOR'">
            I am MODERATOR
        </div>
        <div *ngSwitchCase="'STANDARD'">
            I am STANDARD
        </div>
        <div *ngSwitchDefault>
           I am NOT KNOWN OR DEFAULT
        </div>
    </div>

And ts:

userType: 'ADMIN' | 'MODERATOR' | 'STANDARD' = 'STANDARD';

Summary

Angular has a robust content projection mechanism that allows us to combine rendered content combinations. You can visit the official documentation for details.

Providing in Angular - how to share data

Tomasz Flis — Fri, 07 Jul 2023 11:41:22 +0000

Introduction

In the angular framework, dependency injection, and providers are one of the core features. This feature allows us to use a single data source in many places. For example, we can share one HTTP call result with many components to avoid too many requests for the same data. Another example could be to override one value or a class with another. In this article, I will explain the providers, how to define them, and how to use them in many places.

What are the providers?

Providers in Angular are a source of value that could be shared between many recipients. It could be a static value like, for example, string or boolean, or it could be a whole class that uses the same provider instance. In the Angular role of provider, classes are covered by services. Services are a special kind of class with an Injectable decorator. Thanks to that, we can use other providers inside our class because they can be injected. By default, the Injectable decorator takes as an argument for the providedIn value root, meaning that this current service will be initiated at the root level of the app. More details about that You can find later in this article.

Type of providers

The angular framework has a few types of providers which work differently but, in the end, serve data.

Injection token

One of the possible injectors is the InjectionToken.
It is the simplest provider whose main purpose is to represent values not contained in any class.
An example definition of the injection token is:

export const timezoneToken = new InjectionToken<string>('My timezone');

It is generic and accepts type definition and My timezone as a description. It is useful when we forget about implementing a given injection token and the error contains a given description.

Value provider

The value provider is a provider who accepts the useValue property value that will be set for the provider set in the provide property. It can be any of the values. An example definition can be:

    {
      provide: timezoneToken,
      useValue: 'europe/warsaw'
    },

I used the token from the previous example as a provider and set europe/warsaw as a value.

Factory provider

Sometimes we want to do something with an existing provider and provide it as another new provider instance. We can use a factory provider, which accepts three properties for that purpose. The provide property defines which provider we will provide. Let's make an example. First of all, I will define another injection token:

export const timezoneCityToken = new InjectionToken<string>('My timezone city');

Then to define the factory provider:

    {
      provide: timezoneCityToken,
      useFactory: (timezone: string) => {
          return timezone.split('/')[1];
      },
      deps: [timezoneToken]
    },

In the deps property, we set dependencies for our provider. In this example, I used timezoneToken from the previous example. Those dependencies are passed as params to the method, which is set in the useFactory property. That property accepts a method that returns the value for our new provider.
Sometimes we want to set an array of values under the same provider. To achieve that, We can set property multi to true, so the value of the above provider would be ['warsaw'] instead of just warsaw.

Use class provider

Another type of provider is the useClass provider. It is used when we want to use a standard class to create an instance for our provider. An example of usage can be:

    {
      provide: MyDataAbstarct,
      useClass: UsersList,
    }

And the MyDataAbstarct content is an abstract class, so it cannot have its own instance:

export abstract class MyDataAbstarct {
    abstract itemsList: string[];
}

And the UsersList content:

export class UsersList extends MyDataAbstarct {
    itemsList = ['John', 'Mike', 'Anna'];
}

To reach this list, we can utilize the inject method by:

  readonly list = inject(MyDataAbstarct).itemsList;

So useClass provider is a cool way to have consistency across different places and use common patterns because we can easily replace the used class but keep the provider.

Use existing provider

The last type of provider is the useExisting provider. It works similarly to a useClass, but it shares the same instance with the selected provider. Simple usage can be:

...,
    UsersList,
    {
      provide: MyDataAbstarct,
      useExisting: UsersList,
    },
...

Please remember that useClass would create a separate instance of the selected provider.

Providers usage

Those are examples of which types of providers exists in Angular. Now let's see how we can provide them.

Root level

Services in Angular are classes that can be injected with other providers and are mainly used to serve common logic. We can inject them (to create new instances) at the root level of our application, which is a default approach for services. It is set by a dedicated decorator:

@Injectable({
  providedIn: 'root'
})

Value root means that a given service will be injected at the app's top level. Another value can be platform, meaning we share instances with other apps on the same page. The last possible value is any, meaning that each place will receive a new, unique service instance.

Module level

We can provide any provider at the module level by defining it in providers property, for example:

@NgModule({
  declarations: [
    FlagComponent
  ],
  imports: [
  ],
  providers: [FlagService],
})
export class FlagModule { }

That means FlagService will provide the same instance across all modules and components used in FlagModule.

Component level

Like above, we can use the provider on a component level by adding it to the providers property. The same instance and all children's components will be shared inside that component.

Route level

To decrease imports and lines of code in components, We can set providers on the route configuration, for example:

export const appRoutes: Routes = [
    {
        path: 'flag',
        loadChildren: () => import('./flag/flag.module').then(m => m.FlagModule),
        providers: [
            FlagService,
        ],
    }
]

It works in a similar way as provided on the component level.

To access a provider, we can utilize two ways:

inject function in the class body or useFactory provider, for example:

readonly myInstance = inject(MyService);

constructor, for example:

constructor(readonly myInstance: MyInstance) {}

Providers direct usage configuration

Sometimes we want to omit a provider's usage, or it can be optional. Angular has dedicated flags for providers to set it up.

Optional - marks provider as optional and won't throw an error when not provided but returns null instead,
Self - will look for a provider only at the current component or directive level
SkipSelf - will skip the current component or directive and look for the provider at the parent level,
Host - will look for a provider up to the host level.

To apply those flags with the inject method, we can add them as a configuration object, for example:

  readonly list = inject(MyDataAbstarct, { optional: true })?.itemsList;

Or if we are using a constructor, then we have to add a dedicated decorator:

  constructor(
    @Optional() readonly list: MyDataAbstarct,
  ) {}

Summary

Angular has a powerful mechanism of providing values and shares common sources with many ways of configuring it. Knowing it allows developers to write reusable and clean code. Here You can find more details.

Angular component - basics of properties

Tomasz Flis — Fri, 09 Jun 2023 15:57:45 +0000

Introduction

The essential element of the Angular framework is a Component. Each Angular application must have at least one component to run and serve the view. Behind the scene, the component is a typescript class with a particular decorator Component added. Thanks to that, Angular knows this class will render something and can accept data by inputs and trigger events by outputs. This article will explain the basics of components and how to configure them.

Component use cases

Components are special HTML elements that we can use to:

serve the content of the whole application, primarily by using AppComponent, which is a root component served as the first element of the view
create minor pieces of the view, like inputs or buttons
create a combination of the components by placing one into another to develop more extensive view elements like contents, navbars, or forms.

To use a component, We have to put its selector in HTML in place that We want to display the current component. For example, if we want to display the root component, by knowing that it has an app-root selector, We have to put

<app-root></app-root>

In the HTML. That will render the contents of that component in a selected place.

Component props

As mentioned, Angular heavily uses typescript decorators, which allow us to set initial properties that, with the combination, Angular will make components usable and renderable. Those properties are placed inside of the Component decorator and are:

Selector

The selector is a string that defines the name of the html tag that Angular uses to render a given component, for example, app-root.

Template

The templateUrlis a path to an HTML file that is used as a template for the current component, and the template is a string that holds the HTML template for the current component, same as templateUrl, but kept internally with the component in typescript code. Angular requires that one of those is only present.

Styles

The styleUrls is an array of strings with paths to style files
that are used by the current component. Like with templates, we can store our stylings inside of typescript code by using the style property, which can hold an array of strings with the stylings. The scope of those styles can be changed by using another property, encapsulation. That property can be set to one of the:

ViewEncapsulation.None - which doesn't limit the style used to the component only, but styles are applied to the whole application. For example, if we would set the background color of a button to red, then that color would be used for each button in the app
ViewEncapsulation.Emulated - (default) limits styles to the current component only so that it won't affect other components
ViewEncapsulation.ShadowDom - wraps the current component in the Shadow dom. It is usable if we want to use something other than global styles in our component.

Standalone

Added with version 14 of Angular, it allows us to put components into standalone mode by setting the standalone property to true. We can omit modules and use components directly in the needed place. To use other modules, standalone components, standalone pipes, etc., we can use the imports property, an array of required classes.

Change detection

Angular has a specific change detection mechanism implemented, which looks for changes from the top to the bottom of an application. We can change that behavior by setting changeDetection to ChangeDetectionStrategy.OnPush so change detection will be triggered when any of the inputs change its reference—recommended for optimization purposes.

Providers

The providers property is an array of classes that provides values or properties. In most cases, services are used to be providers whose instances should be set with the current component. Another example could be an Injection token whose value could be overwritten by a value provider and used as one of the component's providers. The example shows how to override the APP_BASE_HREF token by a different value.

  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    }
  ],

There is also the viewProviders property, which works in the same way as providers, but instances are only reachable by components that are not content projected, so those that are placed by <ng-content> do not have access to viewProviders.

Host

The host property can be used for setting properties on a host element, for example:

host: {
    'class' : 'my-custom-class'
  }

Will result with:

<app-root class="my-custom-class"></app-root>

Jit

The jit property stands for "just in time", when set to true, tells Angular that this component will be compiled during the run time on the browser side.

Inputs and Outputs

The inputs property is used for information on which properties on the component can be set. On the other hand, the outputs property is used to inform which events are supported by the component. A more convenient approach for those is to use Input and Output decorators.

Queries

The queries property is used for defining content queries, for example, if we want to reach an instance of the internal component. As the above more convenient approach is to use, for example, ViewChildren or ContentChildren decorators.

Animations

The animations property defines animations for the current component, for example, if we want to animate when a new item is on the list. Since it is a pretty intensive topic, more about animations can be found here.

Interpolation

The interpolation property is an array with two strings that tells angular how are variables or methods wrapped in the HTML code. By default, it is set to {{ and }} brackets.

Schemas

The schemas property is used to declare and allow the use of properties or elements not from Angular.

Host directives

The hostDirectives property is an array with standalone directives that will be applied to the current component.
For example:

  hostDirectives: [{
    directive: Tooltip,
    inputs: ['tooltipMessage'],
    outputs: ['tooltipOpened'],
  }],

Thanks to that, we can omit adding the Tooltip directive, and we are informing which properties and events using.

Preserve white spaces

The preserveWhitespaces property expects a boolean value and, when set to true, will remove the \s character class in JavaScript regular expressions.

Summary

Components are basic bricks of the Angular framework and can be configured in many ways. Understanding them opens the way to creating great applications.

Angular routing - route to success for beginners

Tomasz Flis — Wed, 24 May 2023 16:28:36 +0000

Introduction

In the current frontend development approach, most web applications are SPA which stands for Single Page applications. It means the browser won't refresh the page whenever we redirect from one page to another. Instead, the proper content of the page is replaced. In this article, I will explain features placed in Angular and related to the routing mechanism.

Project creation

To create a new project in the command line, I type:

ng new books-app --standalone

And I answer y to create Angular routing.
standalone is a new flag added with version 14. It creates an application in a standalone mode, so for example, AppModule is not created, and AppComponent is used as an initial class.

Since we do not have AppModule, We need a provider for routes, which are provided by using provideRouter function inside the app.config.ts file. Thankfully, that is auto-generated during the project initialization.

Route properties

Inside the app.routes.ts file, we will find routes constants with an empty array. For demo purposes, let's generate a component that will be routed to. We can do that by command:

ng g c library

g is a shortcut for generate
c is a shortcut for component
library is the name of the component

Since we defined our project as a standalone, that component is also generated as a standalone.

Path

Properties related to the path are:

path - string represents a link to our component, so setting it to library allows us to visit that component under the http//:example.com/library address.
redirectTo - string which will redirect the current path to the given route. For example, we can set the path to the wildcard ** to redirect to the given path in redirectTo
pathMatch - can be set to one of the:
- full - means that the whole URL path needs to match and is consumed by the route matching algorithm.
- prefix means the first route where the path matches the start of the URL chosen. Still, the route matching algorithm continues searching for matching child routes where the rest of the URL matches.
matcher - if we cannot define a route by a simple string, we can define a custom matcher that, for example, can check a given URL with a regex (we cannot use it with a path property). Sample from the documentation:

{
  matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
      return {
        consumed: url,
        posParams: {
          username: new UrlSegment(url[0].path.slice(1), {})
        }
      };
    }

    return null;
  },
  component: ProfileComponent
}

Component

Properties related to the component are:

loadComponent - is used to lazy load selected components whenever the given route is visited. Great for optimization because it creates a dedicated bundle file for a specific component, so the initial bundle file is smaller; example value can be: () => import('./library.component').then(m => m.LibraryComponent),
component - like above, but without lazy loading example value: LibraryComponent,
children - array with nested routes under a given route,
loadChildren - like above but for modules.

Guards and resolvers

In Angular, Guards are used to protect routes, for example, if a user is not allowed to visit some of them. To create a guard, we can use CLI by typing:

ng g g admin-only

It can be set to one (or more) of possible types:

CanActivate - which loads component only when the given guards return true
CanActivateChild - which loads children of the given routes only whenever the provided guard returns true, but it won't check the component set to the given route
CanDeactivate - which checks if we are allowed to leave the specific route
CanMatch - introduced with version 14 of the angular, checks if we can enter a given route. If not, then proceeds to the next one that matches the current path (in CanActive, it would redirect back). Example content of the guard can be:

export const adminOnlyGuard: CanMatchFn = (route, segments) => {
  const user = localStorage.getItem('user');
  if (!user) {
    localStorage.setItem('user', 'John Doe');
    return false;
  }
  return true;
};

which, for the first time, won't let the user in because there is no user data yet, but after a second attempt, it will allow them to enter.
To use the generated guard, we have to apply it in appropriate property or more than one if needed, for example:

canActivate: [adminOnlyGuard],
canMatch: [adminOnlyGuard],

Resolvers are used to provide data to the component that is set in the current route. It will wait for the result from that resolver and then loads the component, so thanks to that, we are sure that the required values will be there. To generate a resolver, we can use CLI once again:

ng g r user-data

This will create a method that is used to retrieve data. Example content could be:

export const userDataResolver: ResolveFn<string> = (route, state) => {
  return of('mail@example.com').pipe(delay(3000))
};

of is an RxJs function to create an observable, and a delay is a function to delay the emission from the observable by a given time.
To use the generated resolver, we have to add it to the resolver property:

resolve: [userDataResolver]

To reach that data from the component, we can use the ActivatedRoute snapshot instance, for example:

  private readonly route = inject(ActivatedRoute);

  constructor() {
    console.log(this.route.snapshot.data);
  }

To distinguish whether to run resolvers or guards, we can use the runGuardsAndResolvers property, which can be set to one of the:

always - which will always run
pathParamsChange - whenever path params are changed
paramsOrQueryParamsChange - whenever path, matrix, or query parameters change
pathParamsOrQueryParamsChange - Rerun guards and resolvers when the path params change, or query params have changed.

Data

To pass static data to the component, we can use the data property and pass any data as a value, for example:

data: {
  prop: 'value'
}

To reach that data from the component, we can use ActivatedRoute like above.
The title property sets the page title of a given route.
The providers property defines instances of providers, for example, services.
We can also pass data as route segments. To do that, in the path property, we can use a colon : NAME, for example, library/:id, which then in route /library/1 sets key id and a value 1. That value can be found in the ActivatedRoute but in the snapshot.params property.

Outlet

To display the component assigned to the route in the given parent component, we are placing the following:

<router-outlet></router-outlet>

That will render the contents of the component in the selected place.
We can have more than one router-outlet, and then we can select where to render the view by adding a name attribute to the html part:

<router-outlet name="secondary"></router-outlet>

and by setting route property:

outlet: 'secondary'

Route navigations

We can change the current route from HTML by using the routerLink attribute and setting it to the required path, for example:

<a href="" routerLink="/other">Go to other</a>

and from the typescript code part by using Router and calling:

  private readonly router = inject(Router);

  gotToOther() {
    this.router.navigate(['other']);
  }

Summary

The angular framework has a powerful routing mechanism and can be configured in many ways. I introduced some basics in this article and encourage You to dive deep into the official documentation.

Angular starting files explanation for beginners

Tomasz Flis — Wed, 05 Apr 2023 15:26:08 +0000

Introduction

Angular is a powerful framework for single-page applications. During the initialization of a new project, the CLI creates some configuration and initialization files to allow the Angular project works nicely and in the desired way. In this article, I will explain default starting files and their usage.

New project generation

First of all, We need the project. For that, I will use the @angular/cli command line tool, which the developer can install by typing in the command line:

npm install -g @angular/cli

-g means I am installing it globally on my OS.
To create a fresh new project, I am typing:

ng new files-explanation

I am selecting all default values that are prompted by the CLI. The following section will explain files and directories placed at the root of a new project.

Root files and directories

Going from the top:

.vscode a directory that contains configuration files that allow better setup with Visual Studio Code,
node_modules a directory that contains all of the required javascript files that a necessary to run and develop the project
src is a directory that contains all source files that belong to our project, the content of that directory I will explain later,
.editorconfig is a configuration file that sets regular editor properties, for example, charset or indent_size. More about that file can be found here
.gitignore tells git which directories or files should be omitted by the version control system; for example, node_modules should exist in that file,
angular.json is a set of configuration properties that set up our workspace and how the project behaves. More about that can find in my other article
package.json file which lists npm packages and their respective version that are required by the project to run (dependencies) and develop or build (devDependencies); and commands that can be used with the current project,
package-lock.json file lists the exact versions of npm packages installed in the current project. It helps to provide precisely the identical versions when another developer is getting the code,
README.md - a documentation file, which typically contains starting information for developers that are going to work with the project, for example, how to set up the project, how to develop new features, etc.,
tsconfig.app.json - a typescript configuration file, which defines how typescript is behaving in the current project in development files,
tsconfig.spec.json - like above, but for test files,
tsconfig.json - root typescript configuration file used by two previous files and shares common configuration properties. More about that file can be found here

Src files and directories

The app directory contents are:

app.component.html is a file that contains the HTML template of the AppComponent maid by default,
app.component.scss|css is a file that contains sass or css stylings that are applied to AppComponent content,
app.component.spec.ts is a typescript file that contains unit tests for the AppComponent,
app.component.ts is a typescript file that contains the AppComponent class definition, which is used to declare the Angular component,
app.module.ts is another typescript file that contains the AppModule class that defines the Angular module, which is loaded as the first module (by default),

The assets directory is used to put any project assets like images, fonts, and other media files. By default, that directory is a bundle with the rest of the source files during the build phase. In the beginning, there is only one file, .gitkeep, which tells git to not omit that directory if it is empty.

The rest of the src files are:

favicon.ico icon file, which is used as a website icon,
index.html starting HTML file, which is used by servers to display the application (by default),
main.ts file, which bootstraps the whole application. Inside that file, You can place other methods or script calls that should run when the application starts. It is also a place where You define which module or component should be used as a root one,
style.scss|css root styling file, which is used to define stylings applied to the whole application.

Summary

The Angular CLI creates those files, which helps developers to save a lot of time on file creation and application structure and defines all of the requirements that are needed at the beginning. That doesn't mean, of course, that We are limited to those files only.

Angular.json structure for beginners - what we can set

Tomasz Flis — Mon, 20 Mar 2023 20:55:33 +0000

Introduction

During the creation of an Angular project in the root directory, the angular.json file is created. It contains some properties which allow us to configure how the project behaves and how the CLI generates new parts of the project. In this article, I will explain this configuration structure and what those properties are about.

New project generation

First of all, We need the project. For that, I will use the @angular/cli command line tool, which the developer can install by typing in the command line:

npm install -g @angular/cli

-g means I am installing it globally on my OS.
To create a fresh new project, I am typing:

ng new config-explanation

The config-explanation is the name of my new project.
The first question asked by the CLI:

Would you like to add Angular routing? (y/N)

yes option also creates a root routing file app-routing.module.ts
no option skips the creation Next question:

Which stylesheet format would you like to use? (Use arrow keys)

CSS - pure CSS
SCSS - CSS pre-processor with Rust underneath
Sass - like above, just different syntax
Less - CSS pre-processor but with JavaScript underneath The developer can change that option later in the angular.json file. After answering all of those questions, a new project is created.

Main angular.json properties

Angular.json file has nested different structures; below are definitions for each nested set of properties.

Root level

The main properties of the "level 0" angular.json are:

$schema is used for defining definitions and structure for the rest of the current JSON file,
version version of the angular.json schema,
newProjectRoot place where new projects are created by the CLI,
projects list of projects created in the current workspace, with name as a key and configuration as a value.

Project

projectType type of the project application or library,
schematics explained below
root root of the project
sourceRoot place where files like index.html, assets, images, and fonts are kept
prefix prefix for component selectors, for example, when set to app sets all created components with app-* prefix
architect explained below

Schematics

Angular Schematics is a tool for generating and modifying code in an Angular application. They can automate repetitive tasks and enforce consistent coding standards across your projects.

Schematics are templates that define a set of actions that can be applied to a project. These actions include generating new files, modifying existing files, or updating configuration files. Schematics can be run using the Angular CLI or programmatically using the Schematic Engine API.

Angular Schematics can create custom generators, such as generating components, services, or directives with specific configurations or modifying existing codebases to align with a predefined code style. Additionally, Angular provides many built-in schematics that can be used out of the box to add features to your application or modify your codebase.
Overall, Angular Schematics provides a powerful way to automate common tasks in Angular development, helping to reduce errors, save time, and maintain consistent code quality across projects.

In the angular.json file, You can configure the schematics available in the current project. By selecting scss during the project creation, we define a schematic:

"@schematics/angular:component": {
    "style": "scss"
}

Which sets all of the components to use scss by default.
Another example properties that we can set for component schematic are:

inlineStyle which sets styles as inline,
standalone which sets the component as a standalone
prefix - like on the project level.

Other angular default schematics can be found here.

Architect

Angular Architect is a tool in the Angular framework that allows developers to define and execute complex build and deployment processes. A command-line interface (CLI) automates many tasks in creating, testing, and deploying an Angular application.

Angular Architect also provides a set of builders that can be used to perform various tasks, such as building the application, running tests, and deploying the application to multiple environments. These builders can be run using the "ng" command-line tool. For example:

ng build

which will run builder @angular-devkit/build-angular:browser.

Overall, Angular Architect helps developers to streamline their development and deployment workflows, reducing the time and effort required to build and deploy Angular applications.

Each of those builders has common properties:

builder - the name of a builder used in the current command,
options - a set of properties used by the current builder,
configurations - set of properties divided for each environment,
defaultConfiguration - default configuration that the project will use.

Here is the link with default Angular architects.

Summary

Angular.json file is a powerful config file that allows us to define many details of a project and is a good starting point when We are learning an existing project or if We want to describe how our new project will be structured and configured so then We won't have to configure everything from the scratches.

Angular code simplicity with inject

Tomasz Flis — Thu, 02 Feb 2023 20:25:46 +0000

The feature

The angular team in version 14 introduced the inject method to play with dependency injection without needing to add a constructor. Here is an example of a dummy service that is injected:

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

@Injectable({ providedIn: 'root' })
export class ApiService {
    list$(): Observable<any> {
        return of([1,2,3]);
    }
}

Furthermore, the example used in the component would be:

import { Component, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'simple-injection';

  private readonly apiService = inject(ApiService);

  getList$(): Observable<any> {
    return this.apiService.list$();
  }
}

No need to use a constructor, which is fantastic and provides cleaner code.

The util approach

There could be situations the method is more extensive and more complicated. We can introduce the util approach by using the inject method once again. All we have to do is to extract the method to separate functions or even files and use the inject method there:

function getList$(): Observable<any> {
  return inject(ApiService).list$().pipe(
    filter(Boolean),
    map(data => data.list)
  );
}

And then at the component level:

list$ = getList$();

We have to remember that the inject method can be used only in two situations:

in a constructor, a constructor parameter and a field initializer (like above)
factory provider:

providers: [
  {provide: User, useFactory: () => {
    const posts = inject(Posts);
    return new User(posts);
  }}
]

Summary

The inject method is a compelling feature and can save a lot of code and introduce resuable parts of logic.

RxJS Marble tests in Angular

Tomasz Flis — Sun, 14 Nov 2021 14:39:28 +0000

Description

There is an excellent feature called Marble tests from RxJS to test asynchronous code synchronously. We could easily use it in Angular unit tests. I have made a few basic examples about testing code by Marble tests in Angular.

Setup project

My project is using Angular, so I have created a new project (using Angular CLI) by typing in console:

ng new marble-tests

My demo project is quite simple, so I answered no on
routing and selected SCSS as my stylesheet format.

Component

Service

I have made a simple dummy service for getting data. All of its methods return observables using of operator, which returns the stream from given arguments. The complete code is below.

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor() {}

  getList$(): Observable<string[]> {
    return of(['value1', 'value2', 'value3']);
  }

  getNumbers1$(): Observable<number[]> {
    return of([1, 2, 3]);
  }

  getNumbers2$(): Observable<number[]> {
    return of([4, 5, 6]);
  }

  getNumbers3$(): Observable<number[]> {
    return of([7, 8, 9]);
  }

  getBooleans$(): Observable<boolean> {
    return of(false, false, true, false);
  }
}

TS part

My component has simple form, made by using FormBuilder class.

  readonly form = this.formBuilder.group({
    name: [],
  });

In ngOnInit method I am listening to value changes made on form values.

    this.form.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe((data) => console.log(data));

To avoid memory leak, I am using the takeUntil operator, which completes the source stream when the given stream completes. In my situation, I am using Subject observable and assigning it to the destroy$ variable. To close it, I am calling complete method inside ngOnDestroy life-cycle hook (Remember to add OnDestroy class to implements on AppComponent). Variable:

  readonly destroy$ = new Subject<void>();

and complete:

  ngOnDestroy(): void {
    this.destroy$.complete();
  }

To render list to values I am using method getList which returns observable from my DataService. When any error occurs on that observable, I am catching it by catchError operator which expects observable to be returned, so I am returning empty array when error occurs.

  getList(): Observable<string[]> {
    return this.dataService.getList$().pipe(catchError(() => of([])));
  }

My component has method which is setting flag variable to true when given stream emits true. To complete stream when true is emmited, I am using takeWhile operator which keeps stream active when given functions returns true.

  setFlagOnTrue(stream$: Observable<boolean>): void {
    stream$.pipe(takeWhile((value) => !value)).subscribe({
      complete: () => (this.flag = true),
    });
  }

The following component method accepts any number of observables that return an array of numbers. I am using combineLatest operator, which emits when all of the given streams emit at least one time. Then I am flattening those arrays to a single one by flat method.

  combineStreams$(...streams: Observable<number[]>[]): Observable<number[]> {
    return combineLatest(streams).pipe(map((lists) => lists.flat()));
  }

To display example numbers array I am getting numbers method from DataService and passing them to combineStreams$ method.

  getNumbers$(): Observable<number[]> {
    return this.combineStreams$(
      this.dataService.getNumbers1$(),
      this.dataService.getNumbers2$(),
      this.dataService.getNumbers3$()
    );
  }

You can find the complete component code here.

HTML

HTML part is simple. It is only about usage of async pipe to convert async stream to pure values and json pipe for displaying arrays. Full html code below.

<form [formGroup]="form">

  <input type="text" formControlName="name">

</form>

<pre>{{ getList() | async | json }}</pre>

<pre>{{ getNumbers$() | async | json }}</pre>

<pre>FLAG: {{ flag }}</pre>

Marble tests

At the beginning of my AppComponent unit tests, I am declaring variables:

  let component: AppComponent;
  let dataService: DataService;
  let testScheduler: TestScheduler;

TestScheduler is a class which allows us to virtualize time. Instance of that scheduler is created before each test. It provieds actual and expected assertions and expects boolean value on return.

    testScheduler = new TestScheduler((actual, expected) =>
      expect(actual).toEqual(expected)
    );

TestScheduler has method run which as paramters has object of helpers used to define marble tests. My first test is checking if destroy$ variable is completed when component called ngOnDestroy.

  it('should complete destroy', () => {
    testScheduler.run((helpers) => {
      const { expectObservable } = helpers;
      const expected = '|';
      component.ngOnDestroy();
      expectObservable(component.destroy$).toBe(expected);
    });
  });

expectObservable is method, which gets observable as a parameter and performs assertion on it
| indicates that the method should set observable as completed.

Next test checks if streams is unsubscribed when emitted value is true.

  it('should unsubscribe when flag is true', () => {
    testScheduler.run((helpers) => {
      const { expectSubscriptions, cold } = helpers;
      const stream = cold('aaaba', { a: false, b: true });
      component.setFlagOnTrue(stream);
      const expect = '^--!';
      expectSubscriptions(stream.subscriptions).toBe(expect);
    });
  });

cold is method which creates cold observable. The first parameter (aaaba) is marble syntax, an extraordinary string of combinations of how observable behavior should be. It can be:
- is ignored and used only for vertically marbles align
- - represents the frame of virtual time passing
- [0-9]+[ms|s|m] to specify exact amount of passed time
- | indicates that the method should set observable as completed
- # indicates that observable finished with error [a-z0-9] is any alphanumeric character that tells which value (from the second parameter) should use.
- second parameter can be an object of values, which assertion can use keys in the first parameter
^--! is a subscription marble syntax, which is an extraordinary string of combinations of how a subscription should behave. It can be:
- - represents the frame of virtual time passing
- [0-9]+[ms|s|m] to specify exact amount of passed time
- ^ indicates that subscription happens
- ! indicates that unsubscription happens
- () is for grouping events in the same frame
expectSubscriptions is method, which gets subscription log as a paramter and performs assertion on it. To summarize above emits false, false, false, true, false (aaaba, keys from values, so a = false, b = true). Then component.setFlagOnTrue is called on that stream. The expected behavior is '^--!', so it means that the method subscribed to it at the beginning (^), two virtual frames were passed (--), and at the end, it was unsubscribed (!).

Next test checks if values before subscription are taken to result.

  it('should ignore values before subscription', () => {
    testScheduler.run((helpers) => {
      const { cold, hot, expectObservable } = helpers;
      const list1 = hot('a^b', { a: [1], b: [2] });
      const list2 = cold('a', { a: [3] });
      const list3 = cold('a', { a: [4] });
      const expected = '-a';
      expectObservable(component.combineStreams$(list1, list2, list3)).toBe(
        expected,
        {
          a: [2, 3, 4],
        }
      );
    });
  });

This time, one of the observables is hot, so additionally, We can use ^ indicator, which shows the moment when a subscription happens. In given tests, value [1] is ignored because it was emitted before subscription.

Last test check if returned list is an empty array, when error occurs.

  it('should return empty list on error', () => {
    testScheduler.run((helpers) => {
      const { cold, expectObservable } = helpers;
      const list = cold('#', { a: ['value1', 'value2', 'value3'] });
      dataService.getList$ = () => list;
      const expected = '(a|)';
      expectObservable(component.getList()).toBe(expected, { a: [] });
    });
  });

In this test, dataService.getList$ is changed to the method which returns observable with error (# indicator, values are set just for proper typing). Assertion expects an empty array, and the stream is completed in a single frame ((a|), a as a key of value, | indicates that stream is completed).

Summary

Marble tests are a nice feature when we are thing about testing RxJS streams synchronously. It is worth trying.

Link to repo with full code.

Simple selection by Angular CDK

Tomasz Flis — Fri, 03 Sep 2021 13:34:21 +0000

Description

In my recent projects, I had to implement a table with select all or single row functionality. Angular CDK library has SelectionModel, which makes that selection easy to implement.

Setup project

My project is using Angular, so I've created a new project (using Angular CLI) by typing in console:

ng new simple-selection

My demo project is quite simple, so I answered "No" on routing and selected SCSS as my stylesheet format. To install Angular CDK, I typed in the project root:

npm i @angular/cli

Additionally (not required), I used Bootstrap to have provided styling; I added it by typing:

npm i bootstrap

In angular.json file, I added boostrap.scss import to projects.architect.build.options.styles so it looks now:

            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/scss/bootstrap.scss"
            ],

Now my project is ready to develop a table with selection.

Selection

Typescript part

In app.component.scss I created some dummy variable with list of rows:

  rows: any[] = [
    { id: 1, name: 'test1', email: 'test1@test.com' },
    { id: 2, name: 'test2', email: 'test2@test.com' },
    { id: 3, name: 'test3', email: 'test3@test.com' },
    { id: 4, name: 'test4', email: 'test4@test.com' },
    { id: 5, name: 'test5', email: 'test5@test.com' },
  ];

Next, I added variable with selection model from CDK:

selectionModel = new SelectionModel(true);

The import for that model is:

import { SelectionModel } from '@angular/cdk/collections';

Inside ngOnInit life cycle I subscribed to changes on selection (just for proof that selection is working):

  ngOnInit(): void {
    this.selectionModel.changed
      .pipe(pluck('source', 'selected'))
      .subscribe((selected) => console.log(selected));
  }

selectionModel has property changed which emits selected data. pluck operator takes arguments to get (nested) property from emitted object.
To know if all rows are selected, I've made getter which compares length of rows with selected items lengt. If it returns with true then all rows are selected.

  get areAllSelected(): boolean {
    return this.rows.length === this.selectionModel.selected.length;
  }

To select all rows, I am mapping them and adding each row to selection. To deselect all, I am using clear method from selectionModel.

  onSelectAllChange(): void {
    if (this.areAllSelected) {
      this.selectionModel.clear();
    } else {
      this.rows.map((row) => this.selectionModel.select(row));
    }
  }

HTML part

HTML contains basic table from bootstrap documentation. There are two key elements:
header checkbox uses the areAllSelected property check state and the onSelectAllChange method to select or deselect all rows on the change event.
Second element is checkbox from row column. On change event it uses toggle method from selectionModel and pass current row. To know if checkbox should be checked it uses isSelected method from selectionModel and also passes current row. Full HTML code:

<table class="table">
  <thead>
    <tr>
      <th>
        <input
          class="form-check-input"
          type="checkbox"
          id="table-select-all"
          aria-label="Rows selection"
          (change)="onSelectAllChange()"
          [checked]="areAllSelected">
      </th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows; index as i">
      <td>
        <input
          class="form-check-input"
          type="checkbox"
          [id]="'row-checkbox-' + i"
          aria-label="Row selection"
          (change)="selectionModel.toggle(row)"
          [checked]="selectionModel.isSelected(row)">
      </td>
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
      <td>{{ row.email }}</td>
    </tr>
  </tbody>
</table>

Link to repo.

Angular simple form with async testing

Tomasz Flis — Mon, 10 May 2021 18:27:48 +0000

Topic

The developer should test the code. In this example, I will create a simple form with an HTTP request after submission and test.

Project

I used Angular CLI to create the project (default CLI answers):

ng new notification-example

I used Material Angular to provide propper styling by typing (default answers):

ng add @angular/material

Main module

To be able to use required Material modules I added them in imports in AppModule:

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    MatSnackBarModule,
  ],

I also added HttpClientModule to be able to make HTTP calls. ReactiveFormsModule is for making Reactive forms.
Full Module code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    MatSnackBarModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component

In AppComponent I defined simple form with one field which I set as required.

  form = this.formBuilder.group({
    text: [null, Validators.required],
  });

In the constructor, I used two injected classes:

FormBuilder for making Reactie Form
ApiService for sending data via an HTTP request (Service description is placed lower). On form submission, I am checking if form is valid and if it is then I am passing field value to the service. Full component code:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  form = this.formBuilder.group({
    text: [null, Validators.required],
  });

  constructor(
    private readonly formBuilder: FormBuilder,
    private readonly apiService: ApiService
  ) {}

  onSubmit(): void {
    if (this.form.invalid) {
      return;
    }
    this.apiService.create(this.form.get('text').value);
  }
}

HTLM part is really simple, It has form with one field and the submit button.
Full HTML code:

<form [formGroup]="form" (submit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Text</mat-label>
    <input matInput formControlName="text">
  </mat-form-field>
  <button mat-raised-button color="primary" [disabled]="form.invalid">Send</button>

</form>

To place form in center of the window I added some flexbox styling:

:host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

form {
    display: flex;
    flex-direction: column;
    width: 400px;
}

:host applies styling to the component root element, so angular will apply styling to the <app-root> element.

Service

At the beginning of the service, I defined two variables:

url - URL address where service will send data
subject - RxJS class which is used to pass data to HTTP call. We can use the next method to pass that data.

Constructor has two injected classes:

HttpClient to be able to make HTTP calls,
MatSnackBar for displaying snack bar from Angular Material. Subject is used to pass data:

    this.subject
      .pipe(
        debounceTime(500),
        switchMap((text) => this.http.post(`${this.url}posts`, { text }))
      )
      .subscribe(
        () => this.snackBar.open('Post saved!', null, { duration: 3000 }),
        () =>
          this.snackBar.open('Something went wrong.', null, { duration: 3000 })
      );

I am using Subject as an observable by calling the pipe method to work on stream:

debounceTime RxJS operator will wait with emission in a given time and ignores data emitted in a shorter period.
switchMap RxJS operator takes data from the outer observable and passes it to the inner observable. Angular Service from default is a singleton, so We don't have to unsubscribe the subject inside the constructor. If no error occurs during emission snack bar is opened with a Post saved! message. If an error occurs, then Something went wrong is displayed.

To pass data to subject I am using next method:

  create(text: string): void {
    this.subject.next(text);
  }

Full service code:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Subject } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private readonly url = 'https://jsonplaceholder.typicode.com/';
  private readonly subject = new Subject<string>();

  constructor(
    private readonly http: HttpClient,
    private readonly snackBar: MatSnackBar
  ) {
    this.subject
      .pipe(
        debounceTime(500),
        switchMap((text) => this.http.post(`${this.url}posts`, { text }))
      )
      .subscribe(
        () => this.snackBar.open('Post saved!', null, { duration: 3000 }),
        () =>
          this.snackBar.open('Something went wrong.', null, { duration: 3000 })
      );
  }

  create(text: string): void {
    this.subject.next(text);
  }
}

Service tests

To check code coverage of our project, I typed in the command line:

ng test --code-coverage

It uses a karma reporter to generate test coverage, which I can check in the coverage directory. My Service test is missing some checks, so that I will add them.

I generated service with:

ng g service api

so I have a service file and *.spec.ts file, which contains tests.
describe block is for wrapping tests in group. beforeEach method is triggered before each test. In this method in imports, I have:

describe('Service: Api', () => {

  let service: ApiService;
  let http: HttpClient;
  let snackBar: MatSnackBar;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ApiService],
      imports: [HttpClientTestingModule, MatSnackBarModule, NoopAnimationsModule],
    });
    service = TestBed.inject(ApiService);
    http = TestBed.inject(HttpClient);
    snackBar = TestBed.inject(MatSnackBar);
  });

HttpClientTestingModule - for faking HTTP request (I don't want to make real calls)
MatSnackBarModule - component needs it to construct
NoopAnimationsModule - component needs it to construct, faking animations next, I am taking required instances in tests:
service - my service instance allows me to use service methods
http - HTTP service, for mocking responses
snackBar for listening to method calls

Test: should send http call

  it('should send http call', fakeAsync(() => {
    const spy = spyOn(http, 'post').and.callThrough();
    service.create('test');
    service.create('test1');
    tick(500);
    expect(spy).toHaveBeenCalledOnceWith('https://jsonplaceholder.typicode.com/posts', { text: 'test1' });
  }));

it wraps a single unit test. fakeAsync allows me to wait for some time in the test.

const spy = spyOn(http, 'post').and.callThrough();

I want to check if post method will be called. I am passing http instance to check that and .and.callThrough(); to execute code normally like inside service.

service.create('test');
service.create('test1');
tick(500);

I am passing value to the create method like the component is doing. tick waits for the time in given milliseconds (reason to wrap test with fakeAsync).

expect(spy).toHaveBeenCalledOnceWith('https://jsonplaceholder.typicode.com/posts', { text: 'test1' });
  }));

In the end, I am checking if my spy (post method from HTTP service instance) is called only once with the same values as in service.

Test: should call open on snack bar positive

  it('should call open on snack bar positive', fakeAsync(() => {
    spyOn(http, 'post').and.returnValue(of(true));
    const openSpy = spyOn(snackBar, 'open');
    service.create('test');
    tick(500);
    expect(openSpy).toHaveBeenCalledOnceWith('Post saved!', null, { duration: 3000 });
  }));

Main difference from first test is:

spyOn(http, 'post').and.returnValue(of(true));

I used .and.returnValue(of(true)); to fake response from HTTP service and I am returning new observable by using of operator with value true. The rest of the test is similar to the first one. In the end, I am checking if a "positive" snack bar was called.

Test: should call open on snack bar negative

  it('should call open on snack bar negative', fakeAsync(() => {
    spyOn(http, 'post').and.returnValue(throwError('err'));
    const openSpy = spyOn(snackBar, 'open');
    service.create('test');
    tick(500);
    expect(openSpy).toHaveBeenCalledOnceWith('Something went wrong.', null, { duration: 3000 });
  }));

Like the second one, but I am checking if the "negative" snack bar was called.

Now, after checking code coverage, I have 100% code covered in my service, and all tests passed:

Link to repo.

Sending a POST request to different APIs in Angular using RxJS

Tomasz Flis — Tue, 06 Apr 2021 20:28:19 +0000

Topic

RxJs is a powerful tool to play with streams, make operations on them. This demo project is an example of sending one form value to two different APIs (with a toggle button deciding which one should be used).

Setup project

I created an angular project by typing (answered CLI question by default):

ng new store-data-example

I love using Angular Material, so in the root directory, I typed (default answers):

ng add @angular/material

Now my project is ready to code.

Service

To be able to make HTTP calls I added HttpClientModule to imports inside AppModule file (from @angular/common/http).
I made a service to make HTTP calls to two endpoints separatly.
The first one is firing to Httpbin endpoint.
The second one is firing to JSONPlaceholder.
Here is full code of service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class EndpointService {
  constructor(private http: HttpClient) {}

  sendBin(data: any): Observable<boolean> {
    console.info('HTTP BIN sent');
    return this.http.post('https://httpbin.org/post', { data }).pipe(
      map(_ => true),
      catchError(error => of(false))
    );
  }

  sendJsonPlaceholder(data: any): Observable<boolean> {
    console.info('JSON Placeholder sent');
    return this.http.post('https://jsonplaceholder.typicode.com/posts', { data }).pipe(
      map(_ => true),
      catchError(error => of(false))
    );
  }
}

I simplified it, and all success I am treating as positives and all errors as negatives.

map operator converts one value to another
catchError operator is listening for any errors on stream Of course, I could use the error object inside catchError to check response status. Both methods return observable with the boolean results depending on the HTTP response.

The form

To be able to use some Angular Material elements and angular forms I imported some modules into AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSnackBarModule,
    FormsModule,
    MatSlideToggleModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

My form is really simple, with two fields:

  form = this.formBuilder.group({
    firstName: [null],
    lastName: [null],
  });

In constructor, I added three classes:

    private endpointService: EndpointService,
    private formBuilder: FormBuilder,
    private snackBar: MatSnackBar

endpointService my HTTP service
formBuilder Angular reactive form builder
snackBar Angular Material Snack Bar

My component has also two other properties:

subject RxJS Subject which allows me to pass data to the service
enpointToggle true for JSONPlaceholder, false for HttpBin

I am sending form value to the subject by using the next method:

  onSubmit(): void {
    this.subject.next(this.form.value);
  }

Depending on the enpointToggle value I am sending data to one of the endpoints:

    this.subject
      .asObservable()
      .pipe(
        switchMap(value => iif(
          () => this.enpointToggle,
          this.endpointService.sendJsonPlaceholder(value),
          this.endpointService.sendBin(value),
        ))
      )
      .subscribe(result => this.snackBar.open(result ? `Send to ${this.endpoint}` : 'Error', '', { duration: 3000 }))

asObservable allows me to use the subject as observable and treat it as a stream
pipe method is for working with data from the stream
switchMap operator for switching from one observable (with form value) to another (HTTP call)
iif function takes three arguments (and returns observable):
- first takes a function which result decides which observable should be subscribed
- second takes observable which is subscribed when the first function returns true
- third takes observable which is subscribed when the first function returns false IMPORTANT! iif evaluates both expressions in any case, but service will fire HTTP call only in one of them (depending on boolean return)
subscribe calls open method on snackBar to show notification

The HTML code is also simple:

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="fill">
    <mat-label>First name</mat-label>
    <input matInput formControlName="firstName">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Last name</mat-label>
    <input matInput formControlName="lastName">
  </mat-form-field>

  <button type="submit" mat-flat-button color="primary">Send</button>

</form>
<mat-slide-toggle [(ngModel)]="enpointToggle">HttpBin / JSONPlaceholder</mat-slide-toggle>

Link to repo.