Angular PrimeNG Media facilitates the various components, such as Carousel, Galleria, & Image components, that help to design & display a better user interface for the website. This also helps to enhance the overall user experience, along with engaging the user to the site.
The complete list of Media Components is listed below with their brief description:
Carousel Component
The Carousel is a content slider component where an array of data is shown sequentially either manually or automatically.
Components | Descriptions |
|---|---|
| Carousel Basic | Angular PrimeNG Basic Carousel is used to render the basic carousel. The carousel is a slider-type component that offers high customization. |
| Carousel Vertical | We can make the carousel vertical by setting the orientation to vertical. The default layout of the Carousel is horizontal. |
| Carousel Items Per Page and Scroll Items | The number of items per page is defined using the numVisible property whereas the number of items to scroll is defined with the numScroll property. |
| Carousel Responsive | Angular PrimeNG Carousel Responsive for responsive design based on screen size, numVisible, and numScroll can be defined using the responsiveOptions property |
| Carousel Header and Footer | We can make custom properties of the Carousel using a header and footer. |
| Carousel Orientation | Carousel provides two types of orientation i.e. horizontal and vertical which can be set using property orientation. |
| Carousel AutoPlay and Circular | To scroll the Carousel automatically, we can define time in property autoplayInterval. Time is in milliseconds. |
| Carousel Properties | Angular PrimeNG Carousel Properties value, page, style, styleClass, circular, etc. |
| Carousel Events | The onPage(event) is the callback to invoke after scroll. |
| Carousel Templates | The Carousel Templates are used to place the different components in the Carousel component. |
| Carousel Styling | The Carousel in Angular PrimeNG provides great customization with different styling options that can be used to create dynamic carousels, along with enhancing the overall user experience. |
Galleria Component
Angular PrimeNG Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. Let us learn about this using some examples.
Components | Descriptions |
|---|---|
| Galleria Documentaion | The Galleria in Angular PrimeNG is an advanced content gallery component & can be used for displaying images in an attractive manner. |
| Galleria Programmatic | The Galleria Programmatic can be utilized to control programmatically using the activeIndex property. |
| Galleria Indicator | The Galleria Indicator allows users to navigate quickly through the Galleria items. |
| Galleria Thumbnail | Thumbnails in the Galleria component can be positioned at the top, bottom, left, or right and are enabled by default. |
| Galleria Navigator | Navigators are used for navigating to the other items of the Galleria component. |
| Galleria Responsive | The Responsive is used to set the number of images visible in the thumbnails based on the screen size. |
| Galleria FullScreen | When the Galleria component is in fullscreen mode, a blackish mask covers the whole page, and the content is displayed over that mask. |
| Galleria AutoPlay | In autoplay mode, the active item of the galleria component changes automatically after a definer time. |
| Galleria Caption | The caption of an item consists of the tile and the description. |
| Galleria Advanced | Angular PrimeNG Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. Let us learn about this using some examples. |
Image Component
The Image component is used to display images and PrimeNG provides many transforming features and options so that we can display images according to our choice and design.
Components | Descriptions |
|---|---|
| Image Basic | The Image component is used to show a single image to the user with the preview and basic transformations. |
| Image Preview | To enable the image property we have to set the preview property of the Image component to true. |
| Image Indicator Templating | The indicator template is used to customize the content of the overlay which is visible when we hover over the image whose preview is enabled. |
| Image Properties | The Image component is used to show a single image to the user with the preview and basic transformations. |
| Image Events | The image component has 3 events named onShow, onHide, and onImageError |
| Image Templates | This template is used to set the indicator content for the image. |
| Image Styling | Image Styling enables us to modify the default styles and customize them accordingly. |