Angular PrimeNG Media Complete Reference

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.