◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny

W starszych wersjach tworzony komponent musiał być zadeklarowany w NgModule, aby można było użyć go w szablonie innego komponentu. W klasycznym podejściu do organizacji komponentów w Angularze tworzymy tak jak pokazano poniżej: import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ name }}</h1>`, }) export class HelloComponent { name: string = 'World'; } Następnie w app.module.ts musimy zadeklarować komponent: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HelloComponent } from './hello.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, HelloComponent, // Deklarujemy nasz komponent ], imports: [ BrowserModule ], bootstrap: [AppComponent] // Wskazujemy główny komponent do inicjalizacji }) export class AppModule { } Prz...

W celu wysłania wiadomości e-mail z aplikacji Angular potrzebny będzie backend, który obsłuży wysyłkę. Można skorzystać z zewnętrznych usług np. EmailJS lub obsłużyć wysyłkę maila w Node.js. W tym wpisie popracujemy nad tą drugą możliwością. Node.js, Express i Nodemailer Utwórz nowy projekt `email-sender` i zainstaluj niezbędne moduły: nodemailer , cors i body-parser : npm install nodemailer cors body-parser Jeśli nie masz zainstalowanego frameworka Express , również go zainstaluj. Utwórz aplikację mailer.js obsługującą wysyłkę maila: const express = require('express'); const nodemailer = require('nodemailer'); const cors = require('cors'); const bodyParser = require('body-parser'); const app = express(); const PORT = process.env.PORT || 3000; // Dane do konta const emailConfig = { host: '', // Serwer SMTP port: 587, // Port: 465 dla SSL lub 587 dla TLS secure: false, // Ustaw na true, jeśli używasz portu 465 auth: { ...

Aby w Angularze uzyskać adres IP klienta, utworzyć trzeba usługę w backendzie np. w Node.js, przez którą go pozyskamy. Node.js i Express Pierwsza rzecz to utworzenie projektu i zainstalowanie frameworka Express: mkdir get-ip-server cd ip-server npm init -y npm install express cors W pliku server.js tworzymy zawartość: const express = require('express'); const cors = require('cors'); const app = express(); const port = 3000; app.use(cors()); app.get('/api/ip', (req, res) => { const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; res.json({ ip }); }); app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`); }); I uruchamiamy nasz backend. Angular Teraz, gdy już masz działający backend, możesz pobierać adres IP w Angularze. Utwórzmy przykładową aplikację: ng new show-ip cd show-ip Utwórz nowy serwis: ng generate service ip W pliku ip.service.ts utwórz kod pobierający ...

Z tego wpisu dowiesz się jak w aplikacji Angular zrobić wysuwane od dołu menu, a właściwie dolny arkusz ( bottom sheet ). Przed rozpoczęciem pracy zainstaluj w swoim projekcie bibliotekę Angular Material , ponieważ to dzięki niej będzie tworzona ta funkcjonalność: ng add @angular/material . Po zainstalowaniu Angular Material możesz zacząć tworzyć komponenty takie jak między innymi bottom sheet. Na potrzeby tego wpisu stworzymy wysuwany od dołu arkusz z listą linków społecznościowych. Tworzenie komponentu ng generate component BottomSheet Edycja app.component.ts import { Component } from '@angular/core'; import { MatBottomSheet } from '@angular/material/bottom-sheet'; import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [MatButtonModule, BottomSheetComponent] }) export class AppComponent { constructor(private...