DEV Community: Ovidiu Miu

Just updated the list of real open-source Angular projects I found

Ovidiu Miu — Mon, 20 Jan 2025 16:52:55 +0000

Let's build a list of real and alive open-source Angular projects.

Ovidiu Miu ・ Nov 13 '21

Angular - No need to import CommonModule in TestBed

Ovidiu Miu — Tue, 11 Jan 2022 12:36:29 +0000

I found some imports of CommonModule in my TestBeds and I investigated a bit why.

And I found out that there is no need to import the CommonModule in a TestBed, since the TestBed automatically imports it.

Stackoverflow won't help me with this

Ovidiu Miu — Tue, 14 Dec 2021 16:28:09 +0000

I asked a simple question on stackoverflow but some moderator closed it because "We don’t allow questions seeking recommendations for books, tools, software libraries, and more. Edit the question so it can be answered with facts and citations"

How is this asking for recommendations? 😠

It seems to me that it can be answer with facts- is there something at all or not. And if not then maybe "why"?

From now on I think I'll only use stackoverflow in readonly mode.

Did I really broke the guidelines with this?

Unexpected tags retrieved from the dev.to api

Ovidiu Miu — Sat, 20 Nov 2021 19:02:59 +0000

I played a bit with the dev.to api and retrieved a list of tags.

The API docs says that the endpoint response "will return tags ordered by popularity", so I wanted to find out what are the top 100 most popular tags (https://dev.to/api/tags?page=1&per_page=100).

I was surprised to find 3 unexpected tags (at least for me): latestnigerianewslat, southafricanews, bánnhàmặttiền

Tried to see if they appear in the app's tags suggestions dropdown, but they don't show up. (not event if searching by them)

I'm curious what's up with them. Is this an API issue or am I ignorant?

Angular: Where does the term 'directive' come from?

Ovidiu Miu — Sat, 20 Nov 2021 14:14:04 +0000

I'm trying to understand the Angular terms and philosophy. One of the most basic building blocks of Angular seems to be a directive.
As a non-native English speaker, I don't find this term intuitive, but rather abstract. So what's up with this term?

The Angular glossary says that "A [directive is a] class that can modify the structure of the DOM or modify attributes in the DOM and component data model".
Ok, it got something to do with changing the DOM. But still, why 'directive'?
It got something to do with 'direction'?😄

Seems VueJS also has the concept of directive.
VueJS docs: "If you have not used AngularJS before, you probably don’t know what a directive is. Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element."

This includes a reference to the AngularJS framework, and, yes, it seems AngularJS also has this term.

AngularJS docs: "At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children."

Ok, so it seems that the term originally comes from AngularJS, and Angular and VueJS just inherited it.

I guess, in Layman terms, a directive is a way of "teaching the HTML to do new tricks" (not mine).
But still... why directive?

Still not sure, maybe the creators thought of this term because a directive it's like commanding (giving directives/instructions/orders) to a static technology (HTML) in order to make it smarter.

Let's build a list of real and alive open-source Angular projects.

Ovidiu Miu — Sat, 13 Nov 2021 19:51:05 +0000

I only found lists polluted with dead/toy/component-library OSS projects. (or even containing AngularJS projects)

I want to find some real and alive open source projects which are using Angular. I'm sure some of us want to dive deeper and read some Angular code used in real life.

Feel free to mention projects in the comments and I will try to keep the list up to date.

List (last updated on 20 Jan 2025):

PeerTube (Angular 18 | 13.4k Github stars)
https://github.com/Chocobozzz/PeerTube
Openproject (Angular 17 | 9.7k Github stars)
https://github.com/opf/openproject
Oppia (Angular 11 | 5.9k Github stars)
https://github.com/oppia/oppia
Wafrn (Angular 19 | 160 Github stars)
https://github.com/gabboman/wafrn

How does Angular know about (click)?

Ovidiu Miu — Sat, 13 Nov 2021 18:37:54 +0000

<button (click)="doSomething()">Do it</button>
I used the above syntax lots of times, almost daily.

But how does Angular know how to deal with this (click) thing?
It seems to work with any element, even custom Angular components. So how does this work?

It works because of the so called Event Biding. Basically it binds the target event name (click) to a method from the component (doSomething).

As explained in this nice article , Angular doesn't have a list of it's own event names, but it actually uses the names of the underlying DOM events.

So the event binding part of the <button (click)="doSomething()">Do it</button> snippet is the equivalent of this vanilla snippet:

element.addEventListener('click', () => { doSomething() });

This means the if I want to know which events I can bind to in Angular I can search them here: https://developer.mozilla.org/en-US/docs/Web/Events

What about the $event?

If the event is a DOM event, like click, mouseenter, keyup etc then the $event is the event itself. For example in the case of click, the $event is a MouseEvent.
But for custom events (using the EventEmitter) the $event is actually the emitted data.

Spring Boot: How to get only the beans I have explicitly created

Ovidiu Miu — Sun, 30 Aug 2020 12:42:25 +0000

Problem: I need to get all the beans I have created explicitly in my app. When calling applicationContext.getBeanDefinitionNames() I get a list of bean names but a lot of them are not created explicitly by me but by Spring, and I'm not interested in those. There is no naming rule I can use for filtering at this point, because not all the beans injected by Spring start with "org.springframework"

Solution: Using applicationContext.getBeanDefinitionNames() and filtering the beans by my root package name ( This solution also works for other use cases, for example if I want to get all the beans I've defined under a certain package ).

package com.omiu.demo;

....

@Service
class PersonService {}

@Component
class PersonAnalyzer {}

class SimpleAnalyzer {}

@Configuration
class GeneralConfig {

    @Bean
    public SimpleAnalyzer simpleAnalyzer() {
        return new SimpleAnalyzer();
    }
}

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        ConfigurableApplicationContext applicationContext = SpringApplication.run(DemoApplication.class, args);

        List<Object> myBeans = Arrays.stream(applicationContext.getBeanDefinitionNames())
                .filter(beanName -> applicationContext.getBean(beanName).getClass().getPackage().getName().startsWith("com.omiu.demo"))
                .map(applicationContext::getBean)
                .collect(Collectors.toList());
    }
}

This gives me a list of only 5 Beans, exactly those I'm interested in:

Best analogy for Authentication vs Authorization I've found so far

Ovidiu Miu — Thu, 21 Nov 2019 13:38:20 +0000

After some thinking and some google searches I think I've found a very good analogy for representing authentication vs authorization. I'll stick to this, seems like a good mental model.

The analogy is found here: https://www.okta.com/identity-101/authentication-vs-authorization/

It roughly goes like this:

You go visit your neighbor. You knock at his door.
He looks through the peephole, and then he recognizes you (authentication).
He opens the door and invites you in.
You talk to him and start feeling comfortable, so you go sit on the sofa. He has no problem with this (you are authorized to do this).
You even use his toilet (still authorized).
After some time you feel hungry and try to open his fridge to have a look. He stops you and says that you are not allowed to do this (not authorized). Maybe his best friend is allowed... (he might be authorized)