JavaScript · Beginner
Simple If-Else Control Flow
Control flow allows your program to make decisions. The 'if' block runs only if the condition in parentheses is true; otherwise, the 'else' block runs.
Open snippet →Code library
Beginner JavaScript exercises
Read these Beginner JavaScript snippets line by line — each one comes with a written breakdown of what the code does and why.
JavaScript · Beginner
Working with Template Literals
Template literals (using backticks ``) allow you to easily embed variables inside strings using the ${variable} syntax, making code much cleaner than using the + operator.
Open snippet →JavaScript · Beginner
Basic Arrow Functions
Arrow functions provide a concise way to write functions. If the function only has one expression, you can even omit the 'return' keyword and curly braces.
Open snippet →JavaScript · Beginner
Declaring Variables with let and const
In modern JavaScript, 'const' is used for values that stay the same, while 'let' is used for variables that will change later. Using 'const' by default is a best practice to prevent accidental reas…
Open snippet →JavaScript · Beginner
Adding Items to an Array
Arrays are used to store lists of data. The '.push()' method adds a new element to the end of the array, and '.length' tells you how many items are inside.
Open snippet →JavaScript · Beginner
Iterating with for...of
The 'for...of' loop provides a clean and easy way to iterate over elements in an array or other iterable objects.
Open snippet →JavaScript · Beginner
Named Function Declarations
A function declaration defines a reusable block of code with a name. Unlike arrow functions, these are hoisted, meaning they can be called before they are defined in the code.
Open snippet →JavaScript · Beginner
String Length Property
Every string in JavaScript has a 'length' property that automatically tells you how many characters (including spaces) are in that string.
Open snippet →JavaScript · Beginner
Strict Equality Operators
In JavaScript, always prefer '===' (strict equality) over '==' (loose equality). Strict equality checks if both the value and the type are the same.
Open snippet →JavaScript · Beginner
Object Property Access
Objects store data in key-value pairs. You can access these values using a dot (dot notation) or square brackets (bracket notation).
Open snippet →JavaScript · Beginnerangular
Component Data Interpolation
Interpolation allows you to display dynamic data from your TypeScript class directly in your HTML template using double curly braces.
Open snippet →JavaScript · Beginnerangular
Handling User Clicks
Event binding in Angular lets you listen for and respond to user actions like button clicks by calling a function in your TypeScript class.
Open snippet →JavaScript · Beginnerangular
Conditional Rendering with *ngIf
The *ngIf directive is used to conditionally include or remove an HTML element from the DOM based on a boolean value.
Open snippet →JavaScript · Beginnerangular
Displaying Lists with *ngFor
The *ngFor directive repeats an element for each item in a collection, such as an array of strings.
Open snippet →JavaScript · Beginnerangular
Basic Types in TypeScript
Angular uses TypeScript, which allows you to define data types for your variables, helping to prevent bugs by ensuring data consistency.
Open snippet →JavaScript · Beginnerangular
Two-Way Data Binding with ngModel
Two-way data binding allows data to flow from the component to the view and from the view back to the component automatically. It uses the 'banana-in-a-box' syntax [()].
Open snippet →JavaScript · Beginnerangular
Receiving Data with @Input
The @Input decorator marks a class property as an input, allowing a parent component to pass data down into this child component.
Open snippet →JavaScript · Beginnerangular
Emitting Events with @Output
Components use @Output properties combined with EventEmitter to send data or notifications back up to their parent component.
Open snippet →JavaScript · Beginnerangular
Template Reference Variables
A template reference variable (declared with #) creates a reference to a DOM element, making it accessible anywhere in the template without needing component logic.
Open snippet →JavaScript · Beginnerangular
Formatting with Built-in Pipes
Pipes are simple functions used in template expressions to accept an input value and return a formatted version for display.
Open snippet →JavaScript · Beginnerangular
Dependency Injection Basics
Dependency Injection (DI) is a core pattern where a class requests dependencies from external sources rather than creating them. In Angular, you inject services through the constructor.
Open snippet →JavaScript · Beginnerangular
The @Injectable Decorator
The @Injectable decorator marks a class as available to be injected as a dependency. Using 'providedIn: root' makes the service a singleton available throughout the app.
Open snippet →JavaScript · Beginnerangular
Lifecycle Hooks: ngOnInit
The ngOnInit hook is called by Angular after the component's data-bound properties are first initialized. It is the best place for initialization logic like fetching data.
Open snippet →JavaScript · Beginnerangular
Safe Navigation Operator (?.)
The safe navigation operator prevents errors when accessing properties of an object that might be null or undefined. It stops the evaluation if a reference is missing.
Open snippet →JavaScript · Beginnerangular
Scoped Component Styling
Angular components use View Encapsulation by default. Styles defined inside a component only apply to its own template and do not leak into the rest of the application.
Open snippet →JavaScript · Beginnerangular
Angular Signals
Signals are a reactive primitive in Angular that track state changes and trigger targeted UI updates efficiently.
Open snippet →JavaScript · Beginnerangular
Standalone Components
Standalone components simplify Angular development by removing the requirement to declare components in an NgModule.
Open snippet →JavaScript · Beginnerangular
Reactive Form Controls
FormControl is used in Reactive Forms to manage the state, value, and validation of a specific input field.
Open snippet →JavaScript · Beginnerangular
Global Event Handling
The @HostListener decorator allows a component to respond to events from the global window or document objects.
Open snippet →JavaScript · Beginnerangular
Class Access Modifiers
Access modifiers like private and public are used in Angular classes to encapsulate internal data and expose external properties.
Open snippet →