ppt presentation for angular 6

# Presentation of Angular

# what is angular .

Angular is more than just a frontend framework with which to build Single Page Applications (SPA). It is a full-fledged development platform built on TypeScript that comprises:

• A component-based framework for building scalable web applications.
• A collection of well-integrated libraries that cover a wide variety of features including routing, form management, client-server communication, progressive web apps and more.
• A suite of developer tools to help you develop, build, test, and update your code via the Angular CLI.

# Server generated pages vs SPA + API

There are two common models for developing websites:

• The presentation and the data of each page is generated by the server before delivering it to the client
• Generally stateful (it means that data is shared during page navigation using sessions and cookies)
• The UI and business logic are coupled
• The response body is generally heavier because it contains both the UI and the data
• Also called multi-page applications (because each view is represented by a separate page)
• Some example frameworks: PHP, Symphony, JSP, Tapestry, ASP Razor pages
• The UI consists of a single static HTML file. The file is said to be static because the server does not modify the page before delivering it
• The server that serves the data is commonly called an API/backend server
• The data is generally in JSON format
• It is not necessary to provide an API (for example, a video game SPA)
• The page content is altered by the client through DOM manipulation. This allows, for example, to simulate a view or page change
• The client uses Javascript in order to fetch dynamic data and manipulate the DOM
• This model is similar to the one used in mobile apps (the SPA is analogous to the mobile app)

An Angular application is an SPA that is complemented by an API if needed. There are other SPA frameworks such as Vue.js, React and Ember.js (the last one is the least popular). Each framework has its own strengths and weaknesses.

# Advantages of using Angular

Angular presents numerous advantages:

• It is particularly well suited to projects that need to scale and to that effect, it is mainly used for enterprise projects.
• Its rich official library ecosystem enables great consistency across projects which means that when transferring teams or projects you will only need to learn about the new business domain and not an entirely new way of doing things because another library set choice was made.
• It is very well documented and the consistency in the way the framework is used means you are more than likely to find any question you may encounter along your learning journey already answered.
• The Angular team takes a lot of pride in how easy they make updating Angular projects, providing easy steps to follow and some fully automated migration.

• My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

Introduction to Angular

Published by Rafael Blanco Modified over 4 years ago

Similar presentations

Presentation on theme: "Introduction to Angular"— Presentation transcript:

1 Frameworks. 2 Framework Set of cooperating classes/interfaces –Structure essential mechanisms of a problem domain –Programmer can extend framework classes,

Using Data Active Server Pages Objectives In this chapter, you will: Learn about variables and constants Explore application and session variables Learn.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

Ch6:creating consistent looking web sites. Master pages Master page defines a combination of fixed content and content place holder to hold the web page(.aspx)

Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.

1 Introduction  Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible.

Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many others 1.

Model View Controller MVC Web Software Architecture.

Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140.

Model View Controller (MVC) Bigger than a Pattern: It’s an Architecture Rick Mercer with help from many of others 1.

Getting Started with Aurelia

Model View Controller (MVC) an architecture Rick Mercer with help from many of others 1.

Overview of Previous Lesson(s) Over View  ASP is a technology that enables scripts in web pages to be executed by an Internet server.  ASP.NET is a.

 ASP.NET provides an event based programming model that simplifies web programming  All GUI applications are incomplete without enabling actions  These.

Getting Started with Angular 2 and TypeScript Nebraska.Code() 2016 Spencer Schneidenbach Ryvit.

1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)

AngularJS. What is AngularJS  Javascript Framework  MVC  for Rich Web Application Development  by Google.

A first stab at a better templating system for Chisimba The Chisimba Canvas.

ANGULAR 2. JavaScript is a high-level, dynamic, untyped, and interpreted programming language. JavaScript was originally developed in May 1995 by Brendan.

Thomas Burleson. Using MVC with Flex & Coldfusion Projects June 27, 2007 See how Coldfusion MVC is similar to Flex MVC…

About project

© 2024 SlidePlayer.com Inc. All rights reserved.

• 4 Dependencies
• 59 Dependents
• 51 Versions

Create JavaScript PowerPoint Presentations

• Table of Contents

Introduction

Works everywhere, full featured, simple and powerful, export your way, html to powerpoint, additional builds, angular/react, es6, typescript, script/web browser, library api, html-to-powerpoint feature, library ports, issues / suggestions, contributors.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with PowerPoint, Keynote, and more
• All major object types are available (charts, shapes, tables, etc.)
• Master Slides for academic/corporate branding
• SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts
• The absolute easiest PowerPoint library to use
• Learn as you code will full typescript definitions included
• Tons of demo code comes included (over 75 slides of features)
• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more
• Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

• PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

• Use the bundle for IE11 support
• CommonJS: dist/pptxgen.cjs.js
• ES Module: dist/pptxgen.es.js

Documentation

Quick start guide.

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

That's really all there is to it!

Full documentation and code examples are available

• Creating a Presentation
• Presentation Options
• Adding a Slide
• Slide Options
• Saving a Presentation
• Master Slides
• Adding Charts
• Adding Images
• Adding Media
• Adding Shapes
• Adding Tables
• Adding Text
• Speaker Notes
• Using Scheme Colors
• Integration with Other Libraries

Easily convert HTML tables to PowerPoint presentations in a single call.

Learn more:

• HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

Please file issues or suggestions on the issues page on github , or even better, submit a pull request . Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

• Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
• View questions tagged PptxGenJS on StackOverflow . If you can't find your question, ask it yourself - be sure to tag it PptxGenJS .

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

• Dzmitry Dulko - Getting the project published on NPM
• Michal Kacerovský - New Master Slide Layouts and Chart expertise
• Connor Bowman - Adding Placeholders
• Reima Frgos - Multiple chart and general functionality patches
• Matt King - Chart expertise
• Mike Wilcox - Chart expertise
• Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

If you find this library useful, please consider sponsoring us through a donation

Copyright © 2015-present Brent Ely

• html-to-powerpoint
• javascript-create-powerpoint
• javascript-create-pptx
• javascript-generate-pptx
• javascript-powerpoint
• javascript-powerpoint-charts
• javascript-pptx
• js-create-powerpoint
• js-create-pptx
• js-generate-powerpoint
• js-powerpoint
• js-powerpoint-library
• js-powerpoint-pptx
• react-powerpoint
• typescript-powerpoint

Package Sidebar

npm i pptxgenjs

Git github.com/gitbrent/PptxGenJS

gitbrent.github.io/PptxGenJS/

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

• Free Sign Up

Learn more how to embed presentation in WordPress

10 Presentations

Published May 28, 2018 in Software Direct Link : http://slideonline.com/presentation/393138-angular-6-a-complete-guide -->

Angular 6 A Complete Guide... Read more

https://www.techugo.com/ Angular 6 has made an entry into the Android development process, and it is going to change the face of Android development in many ways. With this PPT, you can explore the number of benefits and the aspects you would receive as a successful Andoird app developer...Just check it ahead...

Copy and paste the code below into your blog post or website

Embed into WordPress ( learn more )

Other Slide by

Steffanie & jan hospitals presentation pptx.

Published April 13, 2013 under Progamming

Published April 13, 2013 in Progamming

Presentation Slides & Transcript

More presentations.

Copyright © 2024 SlideOnline

All slide content and descriptions are owned by their creators.

SlideOnline is an easy way to instantly publish presentations online and share on all popular social websites.

• Privacy Policy & Terms

Academia.edu no longer supports Internet Explorer.

To browse Academia.edu and the wider internet faster and more securely, please take a few seconds to  upgrade your browser .

Enter the email address you signed up with and we'll email you a reset link.

• We're Hiring!
• Help Center

Related Papers

Medapati Vijay Reddy

Dhruvin bhatt

Leuris Ventura Garcia

Pro TypeScript

Trí Dũng Lê

Miguel Guevara

fxvbfgbbbbbbbbbx

Sufyan bin Uzayr, Nicholas Cloud, Tim Ambler

wahyu prayogo

The notion that “technology moves quickly” is a well-worn aphorism, and with good reason: technology does move quickly. But at this moment, JavaScript in particular is moving very quickly indeed—much like that “torrent of chatter moving at the speed of light” that Matthew Flaming refers to in The Kingdom of Ohio. The language is in the midst of what many have called a renaissance, brought about by the rapidly increasing sophistication of browser-based applications and the rising popularity of JavaScript on the server, thanks to Node.js.

•   We're Hiring!
•   Help Center
• Find new research papers in:
• Health Sciences
• Earth Sciences
• Cognitive Science
• Mathematics
• Computer Science
• Academia ©2024

DEV Community

Posted on Mar 22, 2021

Presentational components with Angular

Cover photo by Jessica Ruscello on Unsplash.

Original publication date: 2020-03-31.

Presentational components are literally the user interface of our Angular application. They serve two purposes:

• Present application state to the user
• Change application state triggered by user interaction

To communicate with the rest of the application, presentational components have input properties for supplying them with data which will be formatted for display. They use output properties to notify application state changes initiated by user interactions. This is their data binding API.

Presentational components interface with users on one side and application state as well as other non-presentational layers on the other. They use container components as the glue that connect them to non-presentational application layers.

In relation to the rest of the application, data goes in, events emit out. Presentational components don't care about where the data is coming from or where the events are going. When it comes to users, data is presented to them through the component template. Events from users come into the component through event handlers, that is methods that are bound in the component template using event bindings.

Can presentational components use property bindings as well? Sure, they can pass any piece of state down the component tree. Likewise, they might be forwarding events up the component tree from other presentational components similar to how they forward user-initialised events up the component tree.

Stateless presentational components

Presentational components can be stateless, meaning their appearance and behaviour are always the same. Stateless presentational components are entirely about what is presented to the user.

In Angular, we have another building block for presentation: A directive. A directive should be our go to solution for presentation. It would be a poor choice to create a component to add a specific style like bold font or a background color. We would either use pure CSS for this or encapsulate the presentation in an attribute directive.

A good example of a stateless presentational component would be a toolbar component that simply projected content and wrapped a DOM structure around it for styling and layout purposes.

Stateful presentational components

Presentational components can have their own isolated state. Think about a checkbox component. It has at least two states: Checked and cleared. The checkbox status is a piece of local UI state.

A checkbox component is stateful. What use is it, if that state is not somehow persisted though? The next time we return to this route, we would often expect the checkbox to be in the same state.

Notifying the application of state changes

To be useful, this local UI state has to synchronise with the rest of the application state. However, if we added persistence logic to store the checkbox status in WebStorage, we would be dealing with a mixed component, not a presentational component.

To remain purely presentational, the checkbox component communicates its state changes to the rest of the application by emitting status events through an output property.

Getting notified of state changes

A stateful presentational component can have an initial state, regardless of the rest of the application. But to synchronise with the rest of the application, it needs a way to hydrate its state when the component is activated. The checkbox status will be governed by an input property.

The user might not be the only actor able to change the checkbox state. Maybe a timer sets the state to checked after 10 seconds for whatever reason. The checkbox component will be notified of this state change through its input property.

Lean presentational components

When following the Model-View-Presenter pattern, we keep our presentational components lean. We keep logic out of our component templates, but also our component models (the component class instances).

Component templates should do not much more than set up expression bindings for presentation and event bindings for user interaction.

Behaviour should be delegated to presenters which are component level dependencies that are completely isolated from the rest of the application. This ensures that the component model is only coordinating the configuration and binding of input properties, output properties, UI properties, and presenters.

The component model of a Model-View-Presenter-style presentational component contains no business logic except for glue code between the data binding API, UI properties, event handlers, and presenters.

Presentational components

We call them presentational components because they represent the presentational layers of our application such as presentation and user interaction as seen in Table 1.

Preferably, we extract user interaction to component level services such as presenters as described in the " Lean presentational components " section.

Presentational components are usually reusable

Presentational components are usually reusable. Their data binding API or rendering API allow them to be used in many places.

We could easily have one-off presentational components though. For example, we could have a logo component that displayed our logo image. A logo component would often only be used in the main layout. Other layout components like a primary navigation component, a top app bar component or a side drawer component are other examples that are only used in one parent component but definitely have at least a presentational component part. They could also be split into container components and presentational components depending on their complexity.

A good example of a reusable presentational component is a button component. We could implement a design system for our organisation that includes a button. All developers in every team should be able to reuse the button component without worrying about the design system changing in terms of colors, fonts, or spacing. Or maybe we switched from Angular Material to Material UI. When the design system inevitably does change, the implementation details of our button component will make us able to make that change in a single place.

Presentational components are pure

Presentational components are pure in the sense that they are free from side effects. Integration with state management, persistence, messaging, I/O, and other non-presentational layers belong in container components.

Because they are pure, they are deterministic in the way they render their DOM and emit events through their output properties.

Figure 1 illustrates that when passed the input values valueX and valueY , this presentational component's DOM will always be rendered in the composition AxBy .

In Figure 2, valueX is input followed by a user interaction which is intercepted as Event Y . This combination of input value and event series leads to the DOM composition AxEy . This will always be the case when Event Y happens while valueX is input.

The presentational component in Figure 3 has the DOM composition Ax based on valueX being passed as an input. The user interaction intercepted as Event Z leads to the value eventZ being emitted through an output property.

This is always the case when Event Z happens while valueX is the input value.

We must be able to demonstrate the examples in Figures 1, 2, and 3 in tests. Otherwise our components are impure in that they depend on external state. If that's the case, we need to create another input property and pass in that external state to turn the component into a presentational component with deterministic behaviour and rendering.

Presentational components become dirty as in needs to be dirty checked for one of two reasons:

• An external event such as a user interaction occurred and was picked up by an event binding in the component template
• New data was passed to one or more input properties

Because of this, we can optimise performance in our change detection cycles by using the OnPush change detection strategy.

Simple example

We continue where we left off in an early section of " Container components with Angular ". Let's see where we're at with the mixed dashboard component from the Tour of Heroes tutorial– or what's left of it after we extracted a container component as seen in Listing 1.

As a small preparation, we'll change the selector to 'app-dashboard-ui' as seen in Listing 3 to match the HTML element in our dashboard container component's template (Listing 1). You can use whatever naming, file, folder, and selector convention you think is appropriate for the use case or for your team.

Declare the component's data binding API

As seen in Listing 2, the dashboard container component expects two input properties on the presentational dashboard component, heroes and title .

Why would we want to extract the heading text from the presentational component? If it's a one-off component in our application, we might leave it in the presentational component. However, by extracing the title we have made it reusable. This dashboard component displays an overview of the top heroes. Maybe we need to add a dashboard for female Marvel heroes or British villains. We're now able to do so by using the presentational component in multiple container components which supply different heroes data sets with relevant titles.

We might also have an application that supports runtime language switching. In this case, we could have a title observable that supplied the title in the active language. Alternatively, we could have a translation pipe that communicates with localisation and internationalisation services. Even in this case, we should extract the title source to the container component to keep our presentational component pure and free from side effects.

We add an Input decorator to the existing heroes property. We add the missing input property, title .

Now our presentational dashboard component has a data binding API.

Use minimal presentational logic in the component template

We want our presentational components to be lean. Our templates should have minimal logic. Any complex presentational logic is delegated to the component model or better yet a presenter.

In Listing 4 we see that we have bound a template expression to the title property and that we iterate over the heroes property to create a master listing with a link for each hero.

The presentational logic in this template has minimal complexity. It uses template expression bindings to display content. It displays a child component which would be a container component if properly refactored. Finally, it loops through the heroes and adds a link to each one.

This component template is doing quite an amount of work of various categories. We could easily split it into several components. We do have one piece of complex logic left: Determining the route path used for the individual heroes.

Because we're working from an existing tutorial application, we will not split any components into smaller components. We will only split mixed components into container components and presentational components.

Read "Lean Angular components" to see examples of solving similar component smells .

Apply the OnPush change detection strategy

Now that we have replaced the mixed dashboard component with a pure, presentational component, we can apply the OnPush change detection strategy to optimise dirty checking and rendering as seen in Listing 5.

When Angular visits this component, it checks whether the values passed to the component's input properties have changed since the last change detection cycle. If the input values haven't changed, dirty checking of the bindings of this component and all its descendant components in the component tree are skipped.

If an event binding in this component's template is triggered or an AsyncPipe in a descendant container component receives a new value, this component and all of its ancestors in the component tree is marked as dirty and will be fully dirty checked in the next change detection cycle.

Advanced example

In "Container components with Angular", we left extracted a lot of logic from the mixed heroes component related to state management and persistence.

Let's review what the mixed heroes component looks like after extracting a container component. Take a look at Listing 6.

The container component expects the following data binding API from the presentational component we want to refactor this mixed component into:

• Input property: heroes: Hero[]
• Input property: title: string
• Output property: add: EventEmitter<string>
• Output property: remove: EventEmitter<Hero>

How do we know? From the hero container component's template which can be seen in Listing 7.

As a first step in refactoring a mixed component into a presentational component, let's declare its data binding API.

We also change the element selector from app-heroes to app-heroes-ui as the container component will use app-heroes .

There was a small problem. An output property was called add , but so was one of the component's event handlers.

I usually prefix an event handler method's name with on , for example onAdd . In this case, we stay consistent with the rest of the codebase and instead rename the event handler to addHero as seen in Listing 8.

How weird, the delete event handler has no method body. There's absolutely no logic left, so what's its purpose? It used to contain important logic for state management and persistence, but that has all been extracted to the heroes container component.

The delete event handler is bound to a user interaction by the component template as seen in Listing 9.

Connect the component template to the data binding API

Let's continue by connecting the component template to the component's data binding API.

First, we replace the hardcoded heading with a template expression bound to the title input property. This makes the component more reusable as we discussed previously.

Then we remember to reflect the changed name of the addHero event handler. This is shown in Listing 10, as is the title template expression binding.

Finally, we decide to use an inline event handler to emit the current hero through the remote output property, when the user clicks the delete button.

We could have done this in the delete event handler. A purist might want to do just that, but we'll use this very basic business logic in the template for now. We'll revisit this decision in the following section.

As seen in the template, the name of the hero we want to add is passed to the addHero event handler. However, we haven't connected it to the add output property, we just created.

We deleted the delete event handler after circumventing it with an inline event handler connected to an output property.

Finishing off, we completed connecting the add hero control flow by emitting the hero name through the add output property after validating it. This can be seen in Listing 11.

We want to minimise logic in parts of our application that are hard to test. Every Angular-specific software artifact is inherently somewhat complex and complicated to test.

Graphical user interfaces are notoriously hard and slow to test and Angular components are no exception, at least not out-of-the-box.

Extracting logic to parts of our application that are easier and faster to test increases the testability of that logic. At the same time, we separate concerns to increase maintainability, scalability, and stability.

Wow, those 4 -ilities are all traits worth maximising!

Let's revisit the heroes component template and see whether there's any non-trivial or complex presentational logic left. Look at Listing 12.

First of all, this component still serves many different use cases. It has a creation form, it iterates over heroes, list their names, links to them and displays their delete buttons.

Normally, we would split it into smaller, more focused presentational components, but in this article series we'll only split components to extract container components.

Read "Lean Angular components" to see examples of splitting components into smaller components .

We'll leave the hard-coded route segment in the template and not worry about it this time around.

A moment ago, we put the logic to emit a hero through the remove output property in the template. The trade-off is that it's not visible in the component model how and when the output value emissions are triggered.

Also, we can't test this in unit tests that are isolated from the DOM as this business logic now lives in the template, outside the component model's surface.

The benefit is that we remove a very basic event handler that would do nothing more than glue a user interaction directly onto an output property.

The remove.emit(hero) business logic is so simple that we don't even have to test it in isolation. If we break it, it will show up in integration tests or end-to-end tests.

Our delete hero control flow now looks like Figure 4.

Going back to the component template, we see that there is a piece of complex presentational logic remaining in the template to control the hero name text field. It even has a comment to explain what it does. What's that you say? A code smell? Indeed it is!

First, the entered hero name is passed to the addHero event handler, then the text field is cleared. Remember that the hero name is validated by the event handler? If the validation did more than ensure that a non-empty hero name is submitted, we would be in trouble.

As the text field is cleared after submission and we have no UI property for the hero name, we wouldn't be able to show an error message in the context of the entered name. We also wouldn't be able to keep the invalid entry in the text field to make it easy to correct.

These are tell-tale signs that we're using template-driven Angular forms and that we could benefit from reactive Angular forms to test the UI behaviour and form validation in isolation from the DOM.

It's interesting to note that as soon as we start to add more than basic form validation or UI behaviour, template-driven forms quickly become uninteresting.

Extract form validation and UI behaviour to component model

Let's use reactive forms to extract form validation and UI behaviour logic from the presentational heroes component's template to its component model.

As seen in Listing 13.2, we introduce the UI property nameControl which is a form control holding a text string value.

In the template shown in Listing 13.1, we bind the <input> element's value by using a FormControlDirective . To use this directive, we have to remember to import ReactiveFormsModule from @angular/forms to our component's declaring Angular module.

The logic that was in an inline event handler before has been moved inside of the addHero event handler on the component model.

We take a snapshot value from the name form control and then clear the value of the form control. This is reflected in the <input> element after the next change detection cycle which is triggered by the update to the form control value.

As before, we trim wrapping whitespace away from the entered hero name which both to sanitize it and to verify that it contains non-whitespace characters. If it does, we emit it through the add output property.

The add hero control flow is illustrated in Figure 5.

There we go, we moved complex logic out of the component template. We could easily argue that this logic isn't very complex, but it's actually enough that it'd require an effort to test, especially when we have to test it through a UI.

With the logic extracted to the component model, we have the option to test it without a UI in an isolated unit test that treats the component model as a regular JavaScript class.

Use minimal presentational logic in the component model

This step is first of all about moving non-presentational logic out of the component model as a presentational component should only be concerned about presentation and user interaction.

In " Container components with Angular ", we already extracted persistence and state management concerns into a container component. What we're left with at this point in the component model is form validation, a user interaction concern.

When we're left with only presentation and user interaction concerns as is now the case for the presentational heroes component, we ensure that the logic has minimal complexity. If it gets complicated enough that it needs separate testing, we should extract it to a presenter. A topic that we'll cover in an upcoming article.

For now, we'll leave form validation in the component model.

Only one thing left to do. Now that we've converted the mixed component to a pure presentational component, we'll apply the OnPush change detection strategy to optimize change detection performance.

This minor but important change is made in Listing 14.

The template bindings of the presentational heroes component will only need to be dirty checked whenever the value of one of its input properties has changed since the last change detection cycle.

This is one part of what's known as the unidirectional dataflow in Angular projects. Data flows down from the component tree. It starts in a data service, goes through the heroes container component and ends up being passed to one of the input properties of the presentational heroes component.

In the other direction, we have user interactions that are observed through event listeners in the component template which trigger event handlers in the component model. After validation and processing, these user-initiated events are converted to component-specific events that are emitted through the presentational component's output properties.

The component-specific events are observed by a container component which makes further processing or mapping and finally forward them to data services. Events flow up the component tree.

Dynamic presentational components

In our examples, we have been dealing with use case-specific components. We left out an important category of reusable presentational components.

The data binding API of dynamic presentational components don't focus primarily on application state. Rather, their most important traits are content projection or dynamic rendering in the form of component outlets, template outlets or Angular CDK portals.

Consumers pass templates or component types to dynamic presentational components, or maybe we pass content to be projected to the main content outlet. We could also be passing content matching specific selectors. Alternatively, we could use presentational component wrappers or attribute directives.

Testing presentational components

Presentational components that are closely related to use cases rather than more generic presentation or UI behaviour should be in a state that they're barely worth testing.

Isolated unit tests should be of little value to use case-related presentational components. The complexity of their logic is so minimal that there is very little room for error.

Instead, complex presentational logic and UI behaviour is extracted to presenters that are easy to test in isolation and don't require Angular or even a DOM.

By having a minimal complexity in presentational components, we can rely on static analysis, integration tests, and end-to-end tests to catch simple errors such as typos, type errors, or mapping errors.

Where unit tests make most sense is to document the component API for dynamic presentational components. An alternative is to use something like Storybook to document the component API. We can even choose to run end-to-end tests on Storybook stories.

Providing fake application state

One benefit of keeping our components pure in the form of presentational components is that they're not tightly coupled to application state. Presentational components don't care where the data comes from. In fact, they're completely detached from application state except for local UI state.

Because of this, we can provide application state from anywhere. We can even fake application state. How can this help us? We can use fake application state if the backend is not ready yet when we're developing.

We can also pass fake data to our presentational components for tests. If we want to make a kitchen sink page for our UI library, for example using Storybook or Angular Playground, we can provide fake data sets to set up the various states that our presentational components support.

Characteristics of presentational components

Presentational components are potentially reusable. If they present application state, they don't care where that state lives. They can be stateful but only in terms of local UI state such as a Boolean property or a CSS state rule indicating whether a dropdown menu is open or closed.

Presentational components presents the UI to the user visually. When a user interacts with a presentational component either local UI state is changed in the component model or template or a component-specific event is emitted through an output property.

Given a set of values for a presentational component's input properties and local UI state, its corresponding DOM structure is always rendered the same. This trait enables us to use the OnPush change detection strategy to optimise change detection performance by minimising dirty checking to when it's needed.

Presentational components can be shared between multiple use cases. They become use case-specific when combined with a container component. Often, we have a 1-to-1 relationship between a presentational components and a container component. Although, we can also have a single container component connect to multiple presentational components of the same or different types.

Some presentational components are made for the purpose of being reusable rather than serve a certain category of application use cases. This type of presentational components represents atoms, molecules, and organisms in the Atomic Design methodology. We can form UI workspace libaries or publishable UI libraries out of a collection of presentational components.

Converting a mixed component to a presentational component

To convert a mixed component to a presentational component, we follow this recipe:

• Extract a container component which manages non-presentational concerns.
• Declare the presentational component's data binding API–its input and output properties.
• Use minimal presentational logic in the presentational component model and template. Complex user interaction and presentation logic is delegated to one or more presenters–component level services that encapsulate UI behaviour, form validation, or formatting.
• Apply the OnPush change detection strategy to optimise change detection.

When extracting a container component, the template of a mixed component should have little reason to change.

We end up with a presentational component that serves two main purposes:

Continue your journey in "Presenters with Angular" .

Related articles

Read the introductory article “ Model-View-Presenter with Angular ”. This is also where you'll find links to the companion GitHub repository, related articles, and other useful resources.

Learn how to extract a container component from a mixed component in "Container components with Angular" .

Learn how to extract a presenter from a presentational component in "Presenters with Angular" .

Peer reviewers

• Nacho Vazquez
• Tim Deschryver

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Ngx-mail-sender

ROSHAN CHAUDHARI - Mar 11

Divide and conquer: right concerns to separate

Mordechai Dror - Mar 10

Configuring Firebase with Angular standalone component

edisne - Feb 28

Getting Started with Angular: Building Your First Todo List App

Ivan Bowen - Mar 8

We're a place where coders share, stay up-to-date and grow their careers.

Angular 6 A Complete Guide

May 28, 2018

320 likes | 1.22k Views

https://www.techugo.com/<br>Angular 6 has made an entry into the Android development process, and it is going to change the face of Android development in many ways. With this PPT, you can explore the number of benefits and the aspects you would receive as a successful Andoird app developer...Just check it ahead...

Share Presentation

• library support
• ng add lets
• core tree directives coupled

Presentation Transcript

ANGULAR 6 A COMPLETE GUIDE

Techugo as a leading Android app development company has brought the latest JavaScript Framework Angular 6. Check this PPT to check what all Angular 6 has in store for you…

NG UPDATE AND NG ADD With ng Update- a CLI command, now you can update your project dependencies to the latest versions. ng add lets you add new possibilities to a project effortlessly.

CDK COMPONENTS The tree component is one of the most promising features of Angular 6. Now the CDK houses and core tree directives coupled with the Angular Mate- rial would offer the Material Design experience to the users.

RXJS V6 Now developers can access to RxJS 6 with Angular 6. There are some important changes, such as: the backward compatibility pack- age rxjs-compat, which would allow the apps to run seamlessly. With the RxJS the method of importing the things is also changed.

CLI WORKSPACES Now developers can access to RxJS 6 with Angular 6. There are some important changes, such as: the backward compatibility pack- age rxjs-compat, which would allow the apps to run seamlessly. With the RxJS the method of importing the things is also changed.

LIBRARY SUPPORT The library support feature allows you to build a library project within the CLI workspace. You can further proceed with configuration and testing.

ANIMATIONS ? The Angular 6 has got the updated animations. You can save almost 47KB of size after removing Polyfill. With this the app’s animation will perform better in Safari.

SUPPORT With Angular 6, the Angular team has announced to extend support to all major releases beginning from version 4.

ELEMENTS The Angular Elements lets you bootstrap Angular components with the existing Angular application.

HOW TO UPGRADE TO ANGULAR 6 The upgrading process can be done in 3 easy steps… Update the @angular/cli Upgrade the rest of the framework packages Update the dependencies And you are ready to rock with Angular 6 ?

W E L O V E TO B E F O L L O W E D

Thank You ! L E T T E C H N O L O G Y S U R P A S S Y O U R I M A G I N A T I O N You can reach us at: [email protected] Skype: ankit.techugo

• More by User

a complete roof replacement guide

There are different types, materials and styles need to keep in mind while planning to replace your roof. An experienced roof contractor can assist you to get affordable, stylish and long lasting roofing.

649 views • 9 slides

A Complete Guide to Owning a Betta

This presentation introduces new betta owners to caring for a betta. The presentation includes information about the nitrogen cycle, myths, facts, costs and much more!

245 views • 7 slides

A Complete Guide on Thermals

A Complete guide on thermal wear detailing, What is Thermal wear, How to wear Thermals, How to buy thermals and taking care for thermal. Visit our slide and get complete information about thermals.

732 views • 46 slides

Aviator Sunglasses-A Complete Guide

Almost everybody buys Aviator Sunglasses once but no one knows how they were invented or who invented them. Sunglass Outlet USA, which is a premium Sunglass Shop has prepared this presentation on Aviator Sunglasses for everybody to know how these evolved, who invented them and what made them so immensely popular after the 1970s-80s era. From Filmstars to Rockstars, men and women from all genres wore them and they enhanced your personality and gave a bravado look. To buy Aviator Sunglasses from Our latest collection visit our website http://www.sunglassoutlet.co/buy-aviator-sunglasses-online.

164 views • 7 slides

Reflexology - A Complete Guide

The science of reflexology finds its origins in the ancient times. It is the application of appropriate pressure to specific points and areas on the feet, hand, or ears.

180 views • 2 slides

Ielts complete guide

On the off chance that IELTS is one of your official English exam alternatives, here are some essential actualities you should think about the exam.

343 views • 13 slides

A Complete Guide to Breast Augmentation

No one can look perfect. However, with cosmetic surgery, one can definitely look more attractive. This is the reason why a large number of women in the world sign up for breast augmentation every year.

31 views • 2 slides

Job Interview - A Complete Guide

239 views • 23 slides

A Complete Guide to Trail Camera

https://trailcameradeals.com Are you planning to use a Trail Camera to boost your hunting game experience? Learn more and Find out What Trail Camera Can do.

16 views • 1 slides

A Complete Blogging Guide for Businesses

A well-built blog optimized with the latest SEO tricks not only attracts lots of traffic to websites but also increases the brand’s reputation and increases the trust of the targeted audience. Let’s read out the article carefully.

83 views • 6 slides

A Complete Guide About Vape Coils

Whether you are new to vaping or have good experience, there is always a concern on proper information about vape coils. Though the vape coils are the most important components of any vaping device, most vapers know very little about these vape coils.

22 views • 2 slides

HCG Diet A Complete Guide

17 views • 1 slides

A Complete Guide to Flutter

Google has recently acquired a new software development kit (SDK), u2018Flutter.u2019 It has also started to make some waves in the market. Flutter can be used to make cross-platform applications by writing apps in one codebase and then compiling for different platforms (Android and IOS). Due to this and host of other reasons, Flutter developers are in demand, and companies are looking to hire Flutter developers. For more interesting things check out this blog - https://blog.digitalogy.co/hire-flutter-developers-flutter-app-development-company/

129 views • 11 slides

Granodiorite Rock - A Complete Guide

Granodiorite is less known and used igneous rock falling in intrusive type.

172 views • 13 slides

A Complete Guide For Power Flush

Dirty boiler tubes decrease the efficiency of the boilers and also consume more energy, which may lead to replacing an old boiler. Regular power flush keeps radiators clean, removes cold spots, for proper heating, and efficient power usage. You can do power flush easily by following some steps.

87 views • 8 slides

A Complete Guide On Hernia

What causes a hernia? How are hernias treated? Find the answers to other hernia-related questions in this PPT.

442 views • 43 slides

Quickbooks For Mac: A complete Guide

QuickBooks for Mac is accounting software used to pay and track bills, expenses, and inventory and serve many other purposes. Using QuickBooks for Mac is a suitable option when you are a Mac user and do not need to access data remotely. Get more details: https://www.thesagenext.com/blog/quickbooks-for-mac/ Facebook: https://www.facebook.com/sagenextinfo

137 views • 12 slides

MICRONEEDLING BIRMINGHAM; A COMPLETE GUIDE

But like any other medical treatment, there are few factors that should be considered before deciding on whether to go through with the treatment or not. Below listed are the factors that will help you to analyze better about microneedling Birmingham.

27 views • 2 slides

A Complete Guide on SEO

Search engine optimization (SEO) is all about bringing a business website in the top rankings of various search engine pages. Itu2019s about improving a website in a manner that when someone does keyword research on the search engine such as Google, MSN, Yahoo, the business website must get ranked high at the top of the search query.

122 views • 11 slides

Manali - A Complete Tour Guide

Trip to Manali, a mystical hill station, by the banks of river Beas would definitely charm you. Manali is a very popular destination, especially during summers.

46 views • 4 slides

A Complete Guide On Tenant Insurance

Here is a complete guide on tenant insurance. It clearly explains every detail of tenant insurance. Check out the things that the tenant insurance cover and the need to take tenant insurance. A complete idea of the points mentioned above is necessary before choosing the insurance.

109 views • 9 slides

Jewellery 3d printing: a complete guide

3D printing, also called additive manufacturing, has revolutionized manufacturing systems in several industries. The jewellery industry is one of them. 3D printing creates highly precise and detailed parts which is one of the most important aspects of quality jewellery. 3D printing jewellery, however, does not mean directly manufacturing end-use pieces. Jewellers do not simply 3D print gold rings. They 3D print highly detailed wax models of the desired pieces and use them to make moulds.

54 views • 4 slides

• Preferences

Angular Best Practices Cheatsheet - PowerPoint PPT Presentation

Angular Best Practices Cheatsheet

Angular is a modern mvvm system and platform that uses html and typescript to create enterprise single-page web applications (or spas). developers follow this system as a set of certain styles and rules while designing angular apps. as an object-oriented typescript programming language, it helps developers in coding with a lot of modern features and functions such as highlight syntax, use data types, full code, artifacts, heritage, classes, and many more. this makes a developer’s task easy and more successful. – powerpoint ppt presentation.

• 1 Features Of Angular
• 2 Best Practices Of Angular
• 3 Best Angular Security Practices
• 1Angular Material
• 2 Modular Structure
• 3Component - Based Architecture
• 4Angular CLI
• 5TypeScript
• 6Angular Universal
• 7Angular Router
• Angular Material is a UI component library for Angularjs developers.
• It is a finished library of reusable UI parts.
• Angular Material parts help in building appealing, predictable, and utilitarian website pages and web applications while holding fast to current website architecture standards like program movability, gadget autonomy, and smooth debasement.
• The modular structure of Angular arranges the code into different modules so all services and components are divided into different groups.
• In Angular coding, you can isolate usefulness into reusable bits of code.
• Component based development is an approach to software development that focuses on the design and development of reusable components.
• These components follow a hierarchical structure.
• We can accumulate components with comparative functionalities, use segments orders and convert them into all around characterized angular segments
• Angular CLI(Command Line Interface tool) helps in developing, scaffolding, testing, and deploying angular applications.
• CLI itself is quite something to learn about, it makes Angular development workflow much easier and faster.
• It can create another rakish application and documents, execute a precise application, run tests, and construct applications for their organization
• One of the unmistakable superscripts of JavaScript is Typescript.
• It has numerous in-assembled libraries and gives various functionalities to an Angular Application.
• Either the default TypeScript Checker can be used, or the Babel compiler can be invoked to convert TypeScript to JavaScript.
• Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time
• Web Application will become more engaging and user- friendly with the use of Angular Universal.
• The Angular Router is a center part of the Angular stage. It empowers engineers to construct Single Page Applications with various perspectives and permit route between these perspectives.
• Acquiring all in-built Routing and Navigation features, Angular works best for all businesses
• Use Lazy Load Module Feature
• Avoid Use Of any Type
• Use ES6 Features
• Use trackBy with NgFor
• Use Environment Variable
• Using Async Pipe
• Always Document
• Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously based of currently activated route.
• It Basically works to Lower startup time, which results in easy and fast loading of the application.
• The great advantage of a lazy loading approach is that we can load our resources on demand and not all at once.
• Since lethargic stacking separates the application into numerous modules (consistent pieces of code) and loads those modules just when they are needed by the client (contingent upon where the client explores inside the application)
• Staying away from the utilization of 'any' type can conceivably bring down the quantity of startling issues.
• Likewise, not utilizing any sort in our application will make the refactoring simple.
• The problems can be restricted by typing the specific variables and keeping others away.
• ES6 stands For ECMAScript 6.
• ES6 brings new language structure and new amazing highlights to make your code more present day and more lucid.
• It allows you to write less code and do more.
• ES6 highlights like Let and Const, Arrow Functions, Object Literals string insertion makes JavaScript programming simpler.
• Utilizing just ngFor mandate without trackBy work in angular application will eliminate all the DOM components and afterward it will reproduce the DOM components again in the DOM tree.
• So in any event, when a similar information is getting utilized, it'll moderate the application execution when there is a ton of information.
• The NgFor directives is used to loop over a collection (or an array) in your application to render a piece of UI repeatedly.
• At the point when we construct projects utilizing Angular (or some other innovation ), it's normal for engineers to have numerous application forms that target various conditions for example improvement and creation.
• We can even add more environments, or add new variables in existing environment files.
• Development and Manufacturing are default angular environment.
• Programming interface endpoints, application variants, datasets, and so on Rakish gives climate setups to proclaim factors remarkable for every climate.
• I generally use async pipe whenever the situation allows and possibly use .Subscribe in when the result is a flat out need.
• You probably heard that the AsyncPipe withdraws from Observables when the segment gets annihilated. In any case, did you likewise know it Unsubscribes when the reference of the articulation changes?
• In addition to the fact that this makes our code quite perfect, but on the other hand it's shielding us from unpretentious memory spills.
• Alway document your code as much as possible.
• Composing remarks inside the code helps different designers associated with the undertaking improvement a great deal and comprehend the reason and rationale of the composed code.
• It deals with the code and adds to the clarity of the code.
• It is a decent practice to archive the utilization and part of every factor and technique. For techniques, every boundary ought to be characterized utilizing multi-line remarks and it ought to likewise be characterized what task precisely the strategy achieves.
• Forestalling Cross-Site Scripting
• HTTP-related Vulnerabilities
• Use Route Guards on the Navigation
• Continue To Update Angular Libraries
• In web applications to forestall malignant assaults, Cross-Site Scripting(XXS) for security weakness can be utilized.
• This interaction will send a content to the assailant and the client both simultaneously and keeps the client from tolerating the malevolent content unconsciously into a confided in site.
• The noxious content that executes on the site may cause an issue as beneath
• The DOM tree might be changed by modifying the HTML page
• Access data from treats and meetings.
• Aggressors can send their content if the site isn't getting away from the HTML content Tags.
• Two types of vulnerabilities are cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI), where an attack could occur to access web app data.
• 1. CSRF (Cross-site request forgery)
• 2. XSSI (Cross-site Script Inclusion)
• Via this form of vulnerability, with the aid of any authenticated user of that domain, attackers send HTTP protocol requests to the server.
• In this method, the attacker acts as a secret mediator.
• For instance, if an authenticated user logs into his/her website, the attacker tries to make an HTTP request by clicking on an unknown connection and can access secret information from that r.
• This technique is used by attackers using insecure scripts.
• Do not use any third-party script that comes from an untrusted domain, because if it is not stable, the hacker may add any executable code to that script and we can compromise any critical information during the execution of this script in our domain.
• Firstly, by operating on the route guard interface, we can accept or refuse permission to navigate the URL requested by users.
• Route guards use a Boolean rule, such that if they all return true value, then the user will navigate to the requested URL and the user will be stopped from navigating that URL if any of them returns a false value.
• CanActivate Checks whether the component can be accessed or not
• CanActivateChild Checks whether the child component can be accessed or not
• CanDeactivate It asks for permission to discard the changes
• CanLoad Checks before load feature module
• Angular improves day-by-day and regularly delivers updates to strengthen current features and to deliver the best results.
• Updates keep coming every now and then with fixed bugs and providing good security reasons, so keep upgrading your libraries to keep your systems flexible and take full advantage of the angular architecture.
• It's a constant journey to create apps, and there's always space to enhance things.
• This list of optimisations is a good place to start, and it will make your team happy to implement these patterns consistently. With your less buggy and powerful application, your users would also love you for the nice experience.
• https//www.tatvasoft.com/blog/angular-optimizatio n-and-best-practices

PowerShow.com is a leading presentation sharing website. It has millions of presentations already uploaded and available with 1,000s more being uploaded by its users every day. Whatever your area of interest, here you’ll be able to find and view presentations you’ll love and possibly download. And, best of all, it is completely free and easy to use.

You might even have a presentation you’d like to share with others. If so, just upload it to PowerShow.com. We’ll convert it to an HTML5 slideshow that includes all the media types you’ve already added: audio, video, music, pictures, animations and transition effects. Then you can share it with your target audience as well as PowerShow.com’s millions of monthly visitors. And, again, it’s all free.

About the Developers

PowerShow.com is brought to you by  CrystalGraphics , the award-winning developer and market-leading publisher of rich-media enhancement products for presentations. Our product offerings include millions of PowerPoint templates, diagrams, animated 3D characters and more.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

angular-powerpoint

Here is 1 public repository matching this topic..., gitbrent / pptxgenjs.

Create PowerPoint presentations with a powerful, concise JavaScript API.

• Updated May 2, 2024

Improve this page

Add a description, image, and links to the angular-powerpoint topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the angular-powerpoint topic, visit your repo's landing page and select "manage topics."

• Popular Categories

Powerpoint Templates

Icon Bundle

Kpi Dashboard

Professional

Business Plans

Swot Analysis

Gantt Chart

Business Proposal

Marketing Plan

Project Management

Business Case

Business Model

Cyber Security

Business PPT

Digital Marketing

Digital Transformation

Human Resources

Product Management

Artificial Intelligence

Company Profile

Acknowledgement PPT

PPT Presentation

Reports Brochures

One Page Pitch

Interview PPT

All Categories

Powerpoint Templates and Google slides for Angular

Save your time and attract your audience with our fully editable ppt templates and slides..

Highly customizable slides with the option to change/edit many features like icon/object shape, size and color. Download additional icons online. Easily convert slides into JPG or PDF format for viewing as a picture or printing for later use. Get PPT slides in widescreen format for various screen sizes. PowerPoint slides compatible with google slides for ease of access.

Presenting our Calculate Angular Velocity Ppt Powerpoint Presentation Outline Picture Cpb. PowerPoint template design. This PowerPoint slide showcases six stages. It is useful to share insightful information on calculate angular velocity This PPT slide can be easily accessed in standard screen and widescreen aspect ratios. It is also available in various formats like PDF, PNG, and JPG. Not only this, the PowerPoint slideshow is completely editable and you can effortlessly modify the font size, font type, and shapes according to your wish. Our PPT layout is compatible with Google Slides as well, so download and edit it as per your knowledge.

Presenting our Angular Displacement Ppt Powerpoint Presentation Infographic Template Visual Aids Cpb.PowerPoint template design. This PowerPoint slide showcases three stages. It is useful to share insightful information on angular displacement This PPT slide can be easily accessed in standard screen and widescreen aspect ratios. It is also available in various formats like PDF, PNG, and JPG. Not only this, the PowerPoint slideshow is completely editable and you can effortlessly modify the font size, font type, and shapes according to your wish. Our PPT layout is compatible with Google Slides as well, so download and edit it as per your knowledge.

Presenting our Structure Project Angular In Powerpoint And Google Slides Cpb PowerPoint template design. This PowerPoint slide showcases four stages. It is useful to share insightful information on Structure Project Angular This PPT slide can be easily accessed in standard screen and widescreen aspect ratios. It is also available in various formats like PDF, PNG, and JPG. Not only this, the PowerPoint slideshow is completely editable and you can effortlessly modify the font size, font type, and shapes according to your wish. Our PPT layout is compatible with Google Slides as well, so download and edit it as per your knowledge.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Deliver an outstanding presentation on the topic using this Various Types Of Retail Store Layouts Angular Or Curved Strategies To Successfully Open. Dispense information and present a thorough explanation of Customer Flow, Various Types, Angular Or Curved using the slides given. This template can be altered and personalized to fit your needs. It is also available for immediate download. So grab it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Present the topic in a bit more detail with this Various Types Of Retail Store Layouts Angular Or Curved Launching Retail Company. Use it as a tool for discussion and navigation on Customer Flow, Various Types, Retail Store Layouts. This template is free to edit as deemed fit for your organization. Therefore download it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Deliver an outstanding presentation on the topic using this Various Types Of Retail Store Layouts Angular Or Curved Opening Speciality Store To Increase Dispense information and present a thorough explanation of Customer Flow, Layout Design, In Store Products using the slides given. This template can be altered and personalized to fit your needs. It is also available for immediate download. So grab it now.

Give your next presentation a sophisticated, yet modern look with this 100 percent editable Angular pogo stick colored icon in powerpoint pptx png and editable eps format. Choose from a variety of customizable formats such as PPTx, png, eps. You can use these icons for your presentations, banners, templates, One-pagers that suit your business needs.

Presenting Linear Speed To Angular Speed Ppt Powerpoint Presentation Layouts File Formats Cpb slide which is completely adaptable. The graphics in this PowerPoint slide showcase four stages that will help you succinctly convey the information. In addition, you can alternate the color, font size, font type, and shapes of this PPT layout according to your content. This PPT presentation can be accessed with Google Slides and is available in both standard screen and widescreen aspect ratios. It is also a useful set to elucidate topics like Linear Speed To Angular Speed. This well-structured design can be downloaded in different formats like PDF, JPG, and PNG. So, without any delay, click on the download button now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Present the topic in a bit more detail with this Various Types Of Retail Store Layouts Angular Opening Retail Store In The Untapped Market To Increase Sales. Use it as a tool for discussion and navigation on Experience, Statistics, Innovative. This template is free to edit as deemed fit for your organization. Therefore download it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Deliver an outstanding presentation on the topic using this W39 Various Types Of Retail Store Layouts Angular Or Curved Opening Retail Outlet To Cater New Target Audience. Dispense information and present a thorough explanation of Various, Retail, Store using the slides given. This template can be altered and personalized to fit your needs. It is also available for immediate download. So grab it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Deliver an outstanding presentation on the topic using this Various Types Of Retail Store Layouts Angular Or Curved Essential Guide To Opening. Dispense information and present a thorough explanation of Key Statistics, Customer Flow, Angular Or Curved using the slides given. This template can be altered and personalized to fit your needs. It is also available for immediate download. So grab it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Present the topic in a bit more detail with this Various Types Of Retail Store Layouts Angular Or Planning Successful Opening Of New Retail. Use it as a tool for discussion and navigation on Store, Innovative, Experience. This template is free to edit as deemed fit for your organization. Therefore download it now.

The following slide showcases the overview of angular or curved store layout design. It covers information about the advantages and disadvantages along with most important statistics. Deliver an outstanding presentation on the topic using this Opening Supermarket Store Various Types Of Retail Store Layouts Angular Or Curved Dispense information and present a thorough explanation of Innovative Retail Store Design, Curved Display using the slides given. This template can be altered and personalized to fit your needs. It is also available for immediate download. So grab it now.

Presenting our Incisura Angularis Importance In Powerpoint And Google Slides Cpb PowerPoint template design. This PowerPoint slide showcases three stages. It is useful to share insightful information on Incisura Angularis Importance This PPT slide can be easily accessed in standard screen and widescreen aspect ratios. It is also available in various formats like PDF, PNG, and JPG. Not only this, the PowerPoint slideshow is completely editable and you can effortlessly modify the font size, font type, and shapes according to your wish. Our PPT layout is compatible with Google Slides as well, so download and edit it as per your knowledge.

We are proud to present our business charts angular process concept 4 stages powerpoint templates. Business Power Point template with growth representation bar. We have created this template with corporate theme and bright color scheme. Use this template to reflect the concept of business process.

Presenting Angularjs MVC Architecture In Powerpoint And Google Slides Cpb slide which is completely adaptable. The graphics in this PowerPoint slide showcase five stages that will help you succinctly convey the information. In addition, you can alternate the color, font size, font type, and shapes of this PPT layout according to your content. This PPT presentation can be accessed with Google Slides and is available in both standard screen and widescreen aspect ratios. It is also a useful set to elucidate topics like Angularjs MVC Architecture. This well structured design can be downloaded in different formats like PDF, JPG, and PNG. So, without any delay, click on the download button now.

Make your presentation profoundly eye-catching leveraging our easily customizable Angular pogo stick monotone icon in powerpoint pptx png and editable eps format. It is designed to draw the attention of your audience. Available in all editable formats, including PPTx, png, and eps, you can tweak it to deliver your message with ease.

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

• Add a QR code
• Embed Microsoft Forms (Education or Business Only)
• Embed a Live Web Page
• Add Links and Menus
• Add Clickable Images to Give More Info
• Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.