Angular Adventures

Angular Adventures

- What's New, Dive into Angular Libraries

- What's New , Dive into Angular Libraries

In a nutshell

Communities

Social Developer

Recognitions

Principal Product Manager @Microsoft

GDE,MCT and MVP from SL

Top stackoverflow contributor

Top mentor @ adplist

 

I'm Sajeetharan Sinnathurai

@sajeetharan
@kokkisajee
@sajeetharan
@sajeetharan

"A big part of life is about learning, unlearning, and relearning "- Sundar Pichai

Before I begin..!

Who’s the best

artist here in the

crowd?

Let's start with a demo

AI Powered App

Angular - Google's Framework for Web Apps

  • A framework for web front-end app 

  • A platform for integrated development

  • An ecosystem for developers

Angular as a Framework / Platform

Batteries Included

Qualified

Full stack for  modern SaaS/AI apps

Angular As an Ecosystem

 madewithangular.com

1000+ Google projects! (Includes Gemini and Google Cloud)

140+ GDES , 700+ Communities , Nearing 100k stars

Ranked as Best framework in terms of Awareness (StateOfJS report)

Evolving with Angular (ng New after every 6 months)

Angular v2

Angular v2

Angular v2

Angular v2

Angular v2

Angular v2

Angular v4

Angular v5

Angular v9

Angular v10

Angular v12

Angular v14

Angular v16

Angular v17

Angular v18

Angular v19

What's New with Angular v19

All Components. pipes, directives are Standalone by Default

ng Update - Automatically refactor code  

Standalone Components :

(DevFest  Podujana Peramuna)

Kubernetes

Podujana

Peramuna

Google Cloud

Podujana

Peramuna

Angular Module

What's New with Angular v19

Angular Signals:

Stable version of Signal for Production apps

New signal experimental apis such as linked Signal

Automatic Refactoring Tools :

Transform existing code ( signal-input, signal query, output migration)

Angular Language service (Automatic refactoring)

What's New......

mat.theme - Create custom themes , Simplified API

Angular Material / CDK :

Incremental Hydration

Incremental hydration allows you to annotate parts of your template, using already familiar @defer syntax, instructing Angular to load and hydrate them on specific triggers, lazily.

ng generate @angular/material:color-theme

Angular Material supports now TimePicker

 Angular.dev

https://angular.dev/

Angular Libraries

"Code Once - use everywhere"

Breakfast

Lunch

Dinner

"Cook once - enjoy anytime."

Life of a single

man

Why Angular Library?

Facilitate Reuse

 

Consistency

 

Collaboration

Scenario

Large accounting software company that needs to release two new applications for banking and registration. Both applications require a set of buttons.

 Create identical buttons for both the banking and registration applications.

 

- Share the CSS between both applications and duplicate the button component.

 

 

Step 1 : Generate Library

 ng generate library my-company --prefix=devfest

Step 2 : Key Files

public-api.ts
ng g c components/button

Step 3 : Creating the button packaging

ng build devfest-ui
npm pack
npm pack
npm link devfest-ui

Step 4 : Install and Import

npm i devfest-ui.tgz
npm pack
import { ButtonComponent } from 'devfest-ui';

Step 5 : Publish to NPM

npm login
npm pack
npm publish

Before I wrap up....

DevFest's impact on Me

2010

2015

2019

2018

2020

Attended first Devfest SL 2012 

Started with angular, became the top angularjs answerer on SO

Became the first google dev expert in the country

Started NG-Srilanka, First Angular Team meet at San Francisco

Book on Angular Projects,Top 4 contributors on Angular

2024

7 years in a row

Q&A

Where to go from here?

- Build next gen web apps with Angular

- Send your queries @kokkisajee

 

 

 

Made with Slides.com