Angular’s Tweets

Jun 2

Angular v14 is here 🎉 #ngUpdate includes: 🔑 Strictly typed forms! 🌈 Streamlined page title accessibility 🗯 CLI autocomplete ➕ a developer preview of standalone components! 🤯 & so much more! Learn all about v14: 📚 goo.gle/angular-v14

GIF

read image description

ALT

626

1,370

Congrats to �?� Team Gateway - Vietnam who used

@Angular

to connect users with a COVID-19 digital check-in system! Watch their solution challenge ➡�? youtu.be/Kp13HX58oo4

Quote Tweet

Google Developers

@googledevs

· Jul 28

Let’s give a big round of applause for the top 3 winners of the 2022 Solution Challenge Demo Day!

Team Blossom - Canada

Team Gateway - Vietnam

Team Xtrinsic - Germany Congratulations! Learn about their solutions → goo.gle/demoday22-live

GIF

read image description

ALT

Jul 26

That's the tweet. That's how easy it is to get started.

yarn create

new-app [...options] or npm init

new-app -- [...options]

Get started with Angular in fewer steps! 🧵 1/n

174

Angular's most request feature is now completed and in v14! Join our very own

@dylhunn

for a deep dive into Typed Forms 🎉

!Welcome to another new video all where we're talking about Typed Forms in Angular. Our very own Dylan Hunn shares the details! Are you already ...

Typed Forms in Angular

Hi friends

244

Topics to follow

Carousel

Jul 20

And just like that, v14.1 is here! → CommonModule directives & pipes are marked standalone �? → Three new extended diagnostics to improve your developer experience ⚡�? → No installing the CLI globally, get started with `npm init

new-app` 🥺

Quote Tweet

· Jun 2

Angular v14 is here

#ngUpdate includes:

Strictly typed forms!

Streamlined page title accessibility

CLI autocomplete

a developer preview of standalone components!

& so much more! Learn all about v14:

goo.gle/angular-v14

Show this thread

GIF

read image description

ALT

146

539

Jul 12

It's so helpful to find problems in your code before getting to production. Sounds great, right? 📺 Check out this new video from

@develwoutacause

all about Extended Diagnostics in Angular

Extended Diagnostics in Angular

Join our very own Doug Parker as he explores Angular's Extended Diagnostics tooling. What type of extended diagnostic do you think would be great? Let us kno...

Jul 11

We’re looking for partners to test the image directive we’re building with Chrome Aurora for better Core Web Vitals. If you’re interested in exploring partnership and using Angular v12 or newer reach out to devrel@angular.io 🚀

181

Want to learn about extended diagnostics in #Angular and how they help you be more productive? Still confused about how they're different from lint checks? Check out this video where I explain all the details!

Extended Diagnostics in Angular

Join our very own Doug Parker as he explores Angular's Extended Diagnostics tooling. What type of extended diagnostic do you think would be great? Let us kno...

v14 closed

's #1 github feature request (typed forms) v15 (or maybe 14.x) is on track to close the newly crowned #1 feature request upvoting issues really does have impact!

211

Oh, nice! In

v14.1, the `NavigationCancel` event includes a code that tells us why the navigation was canceled.

216

Jul 1

👾 GAME TIME! 👾 Mark (

@marktechson

), Jeremy (

@jelbourn

) and Jessica (

@ThePunderWoman

) are live in 5 minutes to play games and answer your Angular questions. Tune in to have an absolutely terrific time 🎉 📅 Friday 7/01/22 at 11AM Pacific goo.gle/ng-games

Gaming live stream with the Angular team Friday July 1st, 2022 at 11 AM PDT

read image description

ALT

Jun 29

ng cache provides a way to control and print cache information from the command line. #ngUpdate You can: - enable - disable - delete from disk - print statistics and information

GIF

read image description

ALT

Jun 28

Configure how the service worker caches opaque responses with cacheOpaqueResponses for data-groups! This can be useful for origins that are outside of your control and do not implement CORS. #ngUpdate

// ngsw-config.json
{
// ...
"dataGroups": [
{
"name": "some-group",
"urls": ["/some/urls/**"],
"cacheConfig": {
"strategy": "performance",
"maxSize": 42,
"maxAge": "3d",
"cacheOpaqueResponses": true
}
}
],
// ...
}

read image description

ALT

141

Jun 27

🆕 methods for HarnessLoader! #ngUpdate Check if a harness is present, and return the harness instance if present.

const loader = TestbedHarnessEnvironment
.loader(fixture);

const hasButton = await loader
.hasHarness(MatButtonHarness)

const buttonHarnessOrNull = await loader
.getHarnessOrNull(MatButtonHarness);

read image description

ALT

Jun 24

v14 adds the ability to keep content inside the DOM while off-screen! #ngUpdate - Preserve the content of an Angular Material tab in the DOM while it is off-screen. - Useful for tabs that have expensive content like videos or audio. Read the docs here → material.angular.io/components/tab

<mat-tab-group preserveContent>
<mat-tab label="First">
<iframe sandbox="allow-forms allow-scripts" sandbox="allow-forms allow-scripts" ></iframe>
</mat-tab>
<mat-tab label="Second">Note how te video from the previous tab is still playing.</mat-tab>
</mat-tab-group>

read image description

ALT

197

Jun 23

We are grateful for everyone in the Angular Community 💓 We're excited to see you all at

@ngconf

! 🥳 📆 Aug 31 - Sep 2, 2022 �? Salt Lake City, UT, USA 🎟�? ng-conf.org #ngconf #ngconfcountdown

0:04

7.8K views

163

Jun 22

ng analytics allows you to control analytics settings and print analytics information. #ngUpdate

GIF

read image description

ALT

Jun 21

New CDK menu & dialog primitives! 👩�?��?💻 Use the CDK to open dialogs. Similar to the existing MatDialog service, but less opinionated and more flexible. Create custom components based on the WAI-ARIA menu & menubar design patterns! material.angular.io/cdk/menu/overv material.angular.io/cdk/dialog/ove

GIF

read image description

ALT

134

Jun 20

Pass in an injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView! #ngUpdate - customize DI behavior in the template - enable cleaner APIs for authoring reusable components and component primitives in CDK

viewContainer.createEmbeddedView(templateRef, context, {
injector: injector,
})

read image description

ALT

123

Jun 17

Rename your Angular properties directly in your code editor! The Angular Language Service can now delegate rename requests from TypeScript to template! #ngUpdate

0:12

22.7K views

517

Jun 16

Application compilations now targets ES2020! 💓 #ngUpdate This ensures less code downleveling during compilations!

{
""compileOnSave"": false,
""compilerOptions"": {
…
""target"": ""es2020""
}
}"

read image description

ALT

199

Jun 15

In v14, you can now bind to protected component members directly from your templates! This gives you more control over the public API surface of your reusable components. #ngUpdate

@Component({
selector: 'my-component',
template: '{{message}}', // Now compiles!
})
export class MyComponent {
protected message: string = 'Hello world';
}

read image description

ALT

106

474

Jun 15

v14 resolves a long-standing issue when NgModel changes were not reflected in the UI for OnPush components in some cases. github.com/angular/angula Thank you

@overthesanity

! #ngUpdate

@Component({
selector: 'my-component',
template: `
<child [ngModel]=""value""></child>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent {}

read image description

ALT

170

Jun 14

Support negative integers as indices in FormArray! ES2021 was recently updated with a new Array.at method, which supports negative indices. Similarly, Array.splice has negative support. All FormArray methods now handle negative indices, just like ES2021 arrays!

const arr = new FormArray([
new FormControl(1),
new FormControl(2)
]);

const control = arr.at(-1);
console.log(control.value); // 2

arr.setControl(-1, new FormControl(3));
console.log(arr.value); // [1, 2, 3]

arr.removeAt(-1);
console.log(arr.value); // [1, 2]

// etc, all FormArray methods updated!

read image description

ALT

v14 includes more tree shakeable error messages and smaller prod bundle sizes! Thanks to a community contribution by

@ramthi

, robust error codes make it easier to reference and find info on how to debug your errors.

read image description

ALT

Angular v14 includes a ton of amazing community contributions. Thank you for helping make Angular better! ♥�? #ngUpdate

199

Contributing to Angular? ♥�? Make sure to update your GitHub fork to our new `main` branch naming: 1. git checkout master 2. git fetch upstream main 3. git rebase upstream/main 4. yarn 5. yarn ng-dev misc new-main-branch

190

By submitting your responses in this survey, you acknowledge that you are of the minimum age of consent in the applicable jurisdiction and that you provide permission to Google and its affiliates to...

Jun 13

Using Angular in a micro-frontend? Take our micro-frontend survey to inform our further research in the space �?

docs.google.com

Micro-frontend Survey

158

Jun 10

👾 GAME TIME! 👾 Mark (

@marktechson

) and Jeremy (

@jelbourn

) are live in 5 minutes. Tune in to have a great time! 📅 Friday 6/10/22 at 11AM Pacific goo.gle/ng-games

Gaming live stream with the Angular team Friday June 10th, 2022 at 11 AM PDT

read image description

ALT

Jun 10

Excited to update to v14 but not sure how to start? Checkout out our #ngUpdate guide: update.angular.io/?v=13.0-14.0

Announcing TypeScript 4.7

Jun 10

Angular v14 updates to TypeScipt 4.7 and now targets ES2020 by default! #ngUpdate

devblogs.microsoft.com

Today we’re excited to announce the availability of TypeScript 4.7! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript and adds syntax for types. Types help...

229

Jun 9

👾 GAME TIME! 👾 Mark and Jeremy are back at it again going LIVE to game, hangout, and answer your questions! 📅 Friday 6/10/22 at 11AM Pacific Set a reminder and add question to the chat now! goo.gle/ng-games

read image description

ALT

Jun 9

This is also strongly typed, due to an amazing community contribution by

You can also configure more complex title logic by providing a custom `TitleStrategy`!

read image description

ALT

127

v14 includes streamlined page title accessibility! #ngUpdate Ensure unique page titles with the new `Route.title` property in the Angular Router!

const routes: Routes = [{
path: 'home',
component: HomeComponent
title: 'My App - Home' // <-- Page title
}, {
path: 'about',
component: AboutComponent,
title: 'My App - About Me' // <-- Page title
}];

read image description

ALT

381

✨ 5 tips in 5 minutes ✨ Learn 5 lesser-known tips for #Typescript for Angular in 5 minutes in this

@ngconf

video by

@AlainChautard

! #ngconfcountdown Will we see you at ng-conf? 🎟�? ng-conf.org

5 Typescript Tricks for Angular | Alain Chautard | ng-conf 2021

In this talk, I will showcase 5 lesser-known Typescript tips and tricks that developers use every single day in their Angular applications. Those tips will h...