Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/l-stanny/angular-studies

These self-directed Angular study projects were generated in an Nx monorepo and are in this repository in part.
https://github.com/l-stanny/angular-studies

angular components css decrement hostbinding html html-input-element increment nx object-oriented-programming oop scss software-architecture software-development software-engineering typescript web-application web-application-development

Last synced: about 9 hours ago
JSON representation

These self-directed Angular study projects were generated in an Nx monorepo and are in this repository in part.

Awesome Lists containing this project

README

        

# Angular Studies

These self-directed study projects were generated in an [Nx](https://nx.dev) monorepo and are in this repository *in part*.

🔎 **Powerful, Extensible Dev Tools**

[Nx Documentation](https://nx.dev/angular)

## Random Numbers Study
Demonstration of Javascript, Typescript, Angular interpolation - one-way data binding -, and the Angular ngModel directive's two-way data binding technique. When the form fields are filled out by the user and the "Generate" button is clicked, the username and a random integer between 1 and 9 are rendered in the DOM. The Angular ngModel directive is used to prefill the editable form fields.

https://github.com/user-attachments/assets/0cd18113-4aae-44a6-9f5f-4c47b5f7073f

## Reddit-like Study
Allows the user to post an article (with a title and a URL) and vote on the posts. Voting uses Javascript subtraction and addition assignment operators and a sort function to sort articles by number of votes.

It has 2 components:

1 to hold the form that submits an article. It binds the submit value in the view to entered text in the inputs using the hash, resolve, syntax then gets the data into the component as objects of the type HTMLInputElement.

1 to hold the default and newly submitted articles which uses @Hostbinding and Angular built-in style and class directives to bind a CSS class and a CSS style to the host app. It uses a model to isolate the data structures.

https://github.com/user-attachments/assets/16dc4bf9-0e4f-4fbc-90e7-b07ab27da523